flexbox

How to center an image within a flex item (cell)

由 心已入冬 提交于 2019-12-25 09:08:15
问题 I have a 3x3 flexbox with an icon and title in each item/cell. I am just trying to horizontally center the icon (svg image). I tried justify-content: center; but it doesn't seem to work. Can any tell me how to horizontally center an image within a flexbox item (or cell, as I am referring to it as)? Code below. HTML: <div class="grid"> <div class="cell"> <img src="images/cs_icon_01.svg"> <div class="service-title">Materials Handling, Warehousing & Storage Facility Management</div> </div> <div

How to get three columns and two rows (1 x 2 x 2) with flexbox

由 爱⌒轻易说出口 提交于 2019-12-25 08:47:18
问题 I want to achieve the following result with Flex if possible. Know how to get that done with CSS, but not quite familiar with Flex. The reason why I want to do that in flex it to force myself write concise and more maintainable codes. .banner { width: 20%; height: 100%; position: relative; float: left; overflow: hidden; } .item { height: 50%; width: 33.33%; float: left; position: relative; } .inner-item-block { height: 100%; width: 80%; float: left; position: relative; } .inner-line { border

Align horizontally 3 elements over 3 divs

由 六月ゝ 毕业季﹏ 提交于 2019-12-25 08:33:39
问题 I have 3 articles in a row that have each a title, a description and a link list. The amount of content is always different, heights of the 3 elements are unknown. I am trying to align the corresponding ones horizontally to each other using flexbox. Anyone can help? Here's an example: <html> <head> <title>Horizontal Alignment</title> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } * { box-sizing: border-box; } .item-container { display: flex; flex-wrap: wrap; }

Flexbox layout pattern 1/3

由 倾然丶 夕夏残阳落幕 提交于 2019-12-25 08:04:34
问题 I'm looking for some help with preparing layout pattern in flexbox, the thing is that I will have a set of divs printed inside container and I can not change the rendering logic (i.e. add some wrapping rows), yet, I'd like to get something like this: Unfortunately got stuck every time, results weren't satisfactory at all :/ Height of those divs is fixed, 1 is a sum of 2 + 3 + gap. https://jsfiddle.net/zechkgf4/ [] Thank you in advance 回答1: What you want to do is not posible with flex-box as

How to automatically stretch and yet constraint HTML child element within parent container?

由 点点圈 提交于 2019-12-25 08:01:48
问题 If we start with this setup of HTML elements: ...and then we make use of CSS flexbox and apply the flex-grow property to the "body" element, we get this: Which is fantastic that it's behaviour that can be done purely in CSS without the need for any JavaScript. However, say we want to have a fixed height for the parent container element and that the child elements (i.e. header, body and footer), should not overflow the parent. Say the header and footer element content are fixed, but the body

Flexbox width broken in IE

由 限于喜欢 提交于 2019-12-25 06:26:55
问题 I have a list of items. Each list item contains a radio button of an unknown width and a dropdown list that I would like to take up the rest of the width of the container. My code works in Chrome, but not in IE11. Any idea what I'm doing wrong? HTML: <ul> <li class="project-list"> <div class="radio-selector"> ...code for radio button... </div> <div class="dropdown-selector"> <select class="dropdown"> ...options... </select> </div> </li> </ul> And my css: li.project-list{ display: -ms-flexbox;

Nested flexboxes and items alignment

由 与世无争的帅哥 提交于 2019-12-25 06:21:51
问题 I'm trying to create my own small grid system based on CSS3 flex display. I basically have the following classes: a grid class, which is a flex container with flex-direction set to column. a row class, which is a flex container with flex-direction set to row. set of column classes of different flex-basis sizes. What I want is to be able to align each row to the left/center/right by setting the self-align property of the row element. However, whenever I try to do it, things seem to go bad.

CSS Flexbox images not preserving aspect ratio

由 醉酒当歌 提交于 2019-12-25 04:50:15
问题 I'm trying to learn to use Flexbox. I have a page with two images separated by a bar in the middle, stacked top to bottom. I want the bar to stay the same size regardless of the browser and the two images to resize when the browser shrinks (keeping the original image size if there is extra space. I'm enforcing this through max-height on the containing divs). I can get the images to resize height-wise, but the width doesn't change to maintain aspect ratio. I've read a couple similar questions

Flexbox layout, push content when opening sidebar?

由 泪湿孤枕 提交于 2019-12-25 03:35:15
问题 So here is a picture reference for this question: What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the user clicks the menu button, have the right side bar content come into view (as shown by the red part in the drawing). I figured the parent container to start would look something like: body { display: flex; flex-flow:

Flexbox layout, push content when opening sidebar?

由 点点圈 提交于 2019-12-25 03:35:09
问题 So here is a picture reference for this question: What I would like to do is, using flexbox layout 3 columns (left side bar, center content, *optional right side bar). Basically, you have the 3 columns but only show the left side bar and content columns normally. Then, when the user clicks the menu button, have the right side bar content come into view (as shown by the red part in the drawing). I figured the parent container to start would look something like: body { display: flex; flex-flow:
订阅 flexbox