Detailed explanation of flex attributes in flex layout

One 、 theory

display:flex

Container attribute ：flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

Project properties ：order,flex-grow,flex-shrink,flex-basis,flex,align-self

Where the flex yes flex-grow, flex-shrink and flex-basis Abbreviation

flex-grow Values are 0,1（ Define project magnification ）：  0 Indicates that the item is not enlarged when its width is less than the width of the container ,1 Indicates that when the item width is smaller than the container width, it is enlarged , The default is 0

flex-shrink Values are 0,1（ Define project downsizing ）：  0 Indicates that when the item width is greater than the container width, it breaks through the container width ,1 Indicates that when the item width is larger than the container, the container width will not be exceeded , The default is 1

flex-basis The value method can be percentage , It can also be px, Such as 50%,100px

among flex-grow And flex-shrink The value of is only 0,1. If it is any other value, I seem to be useless during the test , The corresponding multiples are not shown , The test environment is chome browser

Two 、 give an example

<style>
.parent{
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.chirld{
  box-sizing: border-box;
  background-color: white;
  flex: 0 1 280px;
  height: 50px;
  border: 1px solid red;
}
</style>
<div class="parent">
	<div class="chirld">hello</div>
	<div class="chirld">hello</div>
	<div class="chirld">hello</div>
	<div class="chirld">hello</div>
	<div class="chirld">hello</div>
</div>

flex: 0  1  280px

The third parameter indicates... In the project 280px Greater than in the container 200px, Of the second parameter 0 And 1 Settings work ; If the third parameter is less than 200px, Of the first parameter 0 And 1 Settings work

The third parameter is equivalent to whether the first and second parameters work .

 

google It makes me feel the same as baidu A different experience . Searching for technical information is even better ：

1、Flex Layout of the tutorial ： Grammatical passage   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2、Flex Layout of the tutorial ： Case study   http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

3、CSS flex Attribute in-depth understanding  https://www.zhangxinxu.com/wordpress/2019/12/css-flex-deep/

4、 Elastic layout （display:flex;） Properties,  https://segmentfault.com/a/1190000018233450

5、 illustration ：CSS Flex Attributes are not difficult at all  https://wcc723.github.io/css/2017/07/21/css-flex/