The one thing Flexbox can't do

It seems that flexbox can solve any problem. Center vertically. Farewell floats. Column layout becomes surprisingly simple! The author discovers the Achilles heel of Flexbox--row spans. flexbox--This magical style is liberating us and making work easier. Imagine a weird CSS code that doesn't float and doesn't set margin to negative to make some basic style work correctly. All the tricks you've learned over the past ten years can be completely discarded, because you don't need them.  want to achieve a vertically centered effect in a container that is highly unknown? Flexbox only one line of code can be implemented! The code is as follows: 

. container{    Display:flex;}. centered{    flex:1;}

The HTML code is as follows:

<div class= "container" ><div class= "centered" >this is centered</div></div>

 It's obviously much simpler than the way the CSS was centered vertically several years ago: These methods include setting negative margin values and using Tabel-cell to achieve vertical centering. Moreover, it is more difficult for CSS than vertical centering to achieve three columns of high layout. There is no good way to achieve it until Flexbox appears.  want to implement a three-column, equal-height layout with the same width as the container? The HTML code is as follows: 

<div class= "Container" >  <div class= "column" style= "background:red" >    column 1  </div>  <div class= "column" style= "Background:green" >    Column 2  </div>  <div class= "column" style= "Background:blue" >    column 3  </div> </div>

The CSS code is as follows:

. container {  Display:flex;  width:100%;  height:300px;}. column {  flex:1;  Color:white;}

(Code link: http://codepen.io/swizec/pen/vXONdj/)

It's simple, right? Set the display property of container to Flex, after which each sub-div occupies the same level of space. In the link you can try to change the window size, the effect is unchanged.   Row Span in Flexbox when designers think of this effect: 

This is a grid of buttons of the same size, but you're scratching your heads.  you know that buttons have to be configurable, which means that your code can change depending on the configuration. The label content and color of the button can be changed.  These buttons are equivalent to data. You get an array of tag names that give these labels the style of the button. The best thing is to traverse them, create a list of buttons in the HTML, and implement the layout with CSS.  Flex-flow:row Wrap works well, and it allows you to wrap elements in a line. The HTML code is as follows: 

<div class= "Container" >    <div class= "button" style= "background:red;" >      column 1    </div>    <div class= "button" style= "Background:green" >      Column 2    </ div>    <div class= "button" style= "Background:blue" >      Column 3    </div>   <div class= " Button "style=" Background:blue ">      Column 4    </div>   <div class=" button "style=" background: Red >      column 5    </div>    <div class= "button" style= "Background:green" >      Column 6    </div>    <div class= "button" style= "Background:green;" >      Column 7    </div>    <div class= "button" style= "Background:blue" >      Column 8    </div>       <div class= "button" style= "background:red" >      Column 9    </div></div>

The CSS code is as follows:

. container {  Display:flex;  width:100%;  height:300px;  Flex-wrap:wrap;}. button {  flex:0 33.3%;  Color:white;}

(Code link: http://codepen.io/swizec/pen/XjbrLP/)

The effect is as follows:

It seems not difficult to implement such a branch layout, but designers want the first element to span two lines. Flexbox Achieve cross-line effects ... Now you are completely confused, if you use the same method as me, then the result should be this: 

you must admit that Flexbox's cross-line effect cannot be achieved. You should be patient with this requirement and put the content in the column elements.  The code is as follows: 

<div class= "container" > <div class= " Column "> <div class=" button rowspan "style=" background:red; " > Column 1-rowspan </div> <div class= "button" style= "Background:green;" > Column 7 </div> </div> <div class= "Column" > <div class= "button" style= "background: Green > column 2 </div> <div class= "button" style= "background:red" > Column 5 </DIV&G    T <div class= "button" style= "Background:blue" > Column 8 </div> </div> <div class= "Column"    ; <div class= "button" style= "Background:blue" > Column 3 </div> <div class= "button" style= "Backgro Und:green "> Column 6 </div> <div class=" button "style=" background:red "> Column 9 </ Div> </div></div>  

CSS code:

. container {  Display:flex;  width:100%;  height:300px;  Flex-wrap:wrap;}. column {  flex:1;  Display:flex;  Flex-direction:column;}. button {  flex:1;  Color:white;}. Button.rowspan {  flex:2;}

(Code link: http://codepen.io/swizec/pen/NRqGLQ/)

Implemented with the Flexbox column layout, which is divided into three columns. Set the first element of the first column to 2/3 of the column, and the second element to 1/3. The elements that set other columns are 1/3 of the columns. This implements the cross-line effect of the first element. As follows:

Look, Flexbox's cross-line effect is not too difficult.

Note: This article is a translation.

Original link: https://dzone.com/articles/the-one-thing-flexbox-cant-do

The one thing Flexbox can't do