Day11:Flex布局

た入场券 2021-09-29 05:22 302阅读 0赞

参考：  
来源：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]

网页布局是css的一个重点。

盒子模型

display属性
    position属性
    float属性

W3C提出了一种新的方案—-Flex布局

弹性布局  
任何一个容器都可以指定为Flex布局

.box{
      display: flex;
    }

行内元素也可以使用Flex布局

.box{
      display: inline-flex;
    }

.box{
      display: -webkit-flex; /* Safari */
      display: flex;
    }

设为Flex布局  
子元素的float、clear和vertical-align属性

![image][]

![image.png][]

flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

flex-direction属性决定主轴的方向

.box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

![image][image 1]

![image.png][image.png 1]

flex-wrap属性  
默认情况下，项目都排在一条线  
如果一条轴线排不下，就换行

![image][image 2]

.box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

nowrap（默认）：不换行  
![image][image 3]

wrap：换行，第一行在上方  
![image][image 4]

wrap-reverse：换行，第一行在下方  
![image][image 5]

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

默认值为row nowrap

.box {
      flex-flow: <flex-direction> <flex-wrap>;
    }

justify-content属性定义了项目在主轴上的对齐方式

.box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

![image][image 6]

![image.png][image.png 2]

align-items属性定义项目在交叉轴上如何对齐

.box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

![image][image 7]

![image.png][image.png 3]

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

![image][image 8]

![image.png][image.png 4]

order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
      order: <integer>;
    }

![image][image 9]

flex-grow属性定义项目的放大比例  
默认为0，即如果存在剩余空间，也不放大

.item {
      flex-grow: <number>; /* default 0 */
    }

![image][image 10]

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

.item {
      flex-shrink: <number>; /* default 1 */
    }

![image][image 11]

![image.png][image.png 5]

![image.png][image.png 6]

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[image]: /images/20210724/743c07e82bc44f40acb86fc6ea928d51.png
[image.png]: /images/20210724/99a4df953a00417fa68f849bd8cea397.png
[image 1]: /images/20210724/bf5cd4e08c3a453c8496d44f808a6893.png
[image.png 1]: /images/20210724/33678a38ae55454885acfa8483611a80.png
[image 2]: /images/20210724/f2f33bdc696d42739083f4ca7bde46cd.png
[image 3]: /images/20210724/3452682c1d4d47c3a05a6b18f891bafc.png
[image 4]: /images/20210724/dc994f484ac54fbdaddf875107cdc7e4.png
[image 5]: /images/20210724/c76dee87d35c4d25b1f1390afd31a012.png
[image 6]: /images/20210724/f40369d7d57747e2b0054ab6d2f436cb.png
[image.png 2]: /images/20210724/97c7066d082c48a6ad099dafc79eda7a.png
[image 7]: /images/20210724/43479ecd7bed4ab7a1ed22a9e6faaa56.png
[image.png 3]: /images/20210724/6d922b049fc240a481fffd322ad53c5e.png
[image 8]: /images/20210724/d8201e6673a34c40812011f98ebddb86.png
[image.png 4]: /images/20210724/9410cf7217c44518a341ea34aaeee662.png
[image 9]: /images/20210724/33b82a5e71084bffbe5159e1724d2bfe.png
[image 10]: /images/20210724/6d4a3d77997241e389ebefd61ece35d5.png
[image 11]: /images/20210724/548aebdd7ae1473ab54b641ae6cd01fe.png
[image.png 5]: /images/20210724/344b48333946432f9efd51df7391b66e.png
[image.png 6]: /images/20210724/9ce5fa7d7e8b4c2cbb8496952572161c.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/9f19058882f840968562f09672e06ff5.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/895c9218d5fb43b3b8242d570a6875cb.png