flexbox | 易学教程

Chrome not properly overriding justify-content for flex box

阅读更多关于 Chrome not properly overriding justify-content for flex box

问题 I'm having an issue in Chrome 40.0.2214.93 where if I override the justify-content for an element I get some unexpected behavior. I've created a JS Fiddle for this here: http://jsfiddle.net/n670tmeu/ html <header id="top"> <div id="box1"> This is Box 1 </div> <div id="box2"> This is Box 2 </div> </header> css header { background-color: #ccc; width: 100%; display: -webkit-flex; display: -moz-flexbox; display: -ms-flexbox; display: flex; -webkit-justify-content: flex-end; -moz-justify-content:

Flex item overflowing when using flex-basis [duplicate]

阅读更多关于 Flex item overflowing when using flex-basis [duplicate]

问题 This question already has answers here : What are the differences between flex-basis and width? (3 answers) nested flex elements don't make parent grow (1 answer) Closed 8 months ago . I want to create spacers between elements using the flex-basis property. Doing this will allow me to maintain space between elements regardless of the ´flex-direction`. This works pretty well when using flex-direction: column , but when using flex-direction: row (default value), the last item in the row is

Multiple background colors in scrollable flexbox

阅读更多关于 Multiple background colors in scrollable flexbox

问题 I have a flexbox ( flex-direction: row ) with 2 columns of content and a fixed height. I want the left and right column to have a red and blue background respectively. If either of the columns overflow, the flexbox 's scrollbar appears (the overflowed part is still red/blue). If a column's content height is less than the flexbox 's height, the space below should still be red/blue. Without using gradient colors or javascript, how can I achieve this effect? Demo (I want the gray part to be blue

Vertical align middle not working with ul li

阅读更多关于 Vertical align middle not working with ul li

问题 I am trying to vertical align middle li content but not able to do it. #leftPanel { width:25%; display:table; } #leftPanel li { list-style: none; margin-bottom: 10px; width: 100%; } #leftPanel li img { margin-right:10px; } .activeBtn, .button5 { display: table-cell; float: none; width: 100%; background:#ccc; height: 100%; vertical-align:middle; } <div id="leftPanel"> <ul> <li> <a href="#" class="activeBtn"><img src="https://i.stack.imgur.com/yEshb.gif" width="49" height="45" alt="Location &

Bootstrap 4 navbar with 2 rows and inline form

阅读更多关于 Bootstrap 4 navbar with 2 rows and inline form

问题 Ok so there are a number of questions like this but after having experimented with the code in some of the answers given to other similar questions, I'm still stuck! I've managed to get 2 flex rows working in a flex column, with the brand image vertically centered, but I'm having trouble with the horizontal spacing. On the first row of my navbar I have a list of nav-items and also an inline form with a search bar. I want the search bar to be right aligned, while the nav-items stay left

Is there a CSS only solution to make divs equal height in a vertical grid?

阅读更多关于 Is there a CSS only solution to make divs equal height in a vertical grid?

问题 I have a .parent div and within that I have an unknown number of .child divs. I need the child divs to be in a vertical grid and all of them need to be equal height. Unfortunately, I can't use javascript for this. I have tried different combinations of display: inline-block and float: left , but I can't get the children to be the same height. I am able to achieve same height using display: table-cell but then I run into another problem that the children don't split onto multiple lines if the

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

阅读更多关于 CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新 css 属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment，Flexibox Box以及Multi- column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226) 这期的.net杂志上-这杂志是面向网页设计者以及开发者，全球销量最高的杂志。按照以往来说，用CSS来布局看起来总是一样非常繁杂的工作。然而，随着一个个新标准的推出，网页设计者已经能够实现非常轻松地进行布局工作了。主流的浏览器，在W3C的推动下，已经开始实现多种新型的布局方式，而且我们现在已经可以开始使用了。举个例子，W3C开始把 CSS3 Multicolumn Layout Module 考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。前缀(Vendor prefixes) 虽然一些浏览器对属性普遍的认知，但这并不代表着你就不能采用这些属性。在现在，我们可以通过添加前缀来获得一些主流浏览器对属性的支持，直到这些属性得到了稳定的支持，我们才有可能不用添加这些前缀。Jonathan Snook说，添加供应商前缀就相当于做了两件事情：让开发者在调试新功能的时候，不用担心转换浏览器有不兼容的情况。可以告诫网页开发者这些东西是不稳定的。

flex-direction: column; is not working

阅读更多关于 flex-direction: column; is not working

问题 I have a ul tag with display: flex . I need it ordered by column with flex-direction: column; , but it does not work. css for the container #nav li.four_columns ul.sub-menu { width: 600px; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-flow: wrap; } css for the child #nav li.four_columns ul.sub-menu li { flex-basis: 25%; /* white-space: nowrap; */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ /* border

Auto width of flex column

阅读更多关于 Auto width of flex column

问题 How can I set the width of first flex column so that its width is only the size of its content? http://codepen.io/anon/pen/rrKkOW <div class="flex"> <div class="inside inside-left">Left</div> <div class="inside inside-right">RIght</div> </div> .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } Setting width: auto doesn't work... Something like flex-basis: content would be nice to have :) 回答1: Don't give that column flex:1 as it will expand to take up as much room as is

Resize images to fit display:flex divs

阅读更多关于 Resize images to fit display:flex divs

问题 How do I resize an image to fit the display:flex child divs? Please refer to this plunk: http://plnkr.co/edit/zqdpqnV7QkKrx7lm1Tsi?p=preview The image that I am trying to scale is this: http://images.freeimages.com/images/previews/8fe/sky-above-the-black-mountains-1402912.jpg I read on Stackoverflow that this can be done using max-height and max-width attributes but I am unable to achieve the desired result. I also read this but it doesnt help: http://www.w3schools.com/css/css_rwd_images.asp