flex布局总结 flex布局属性有哪些

从小到大，厚积薄发吧。继续总结下。

这次总结 CSS 中的 flex 布局。CSS(Cascading Style Sheets)层叠样式表，可别作为一个玩家连这个都不知道或记不住。

将 flex 布局，我想从 CSS 的盒子模型讲起。我所知道的有 3 种，W3C 标准盒模型、IE 怪异盒模型和今天的主角弹性盒模型（姑且算吧）。

盒模型是 CSS 技术所使用的一种思维模型，在一个网页文档中，所有 HTML 元素都可以看作盒子。我们按规则地将盒子进行摆放，搭建出网页的结构。一个盒模型包括外边距 margin、边框 border、内边距 padding、实际内容 content 四个属性。

W3C 盒模型的 width 和 height 只包含 content。

IE 盒模型（IE6 以下）的 width 和 height 包含 content + padding + border。这其实更便于我们布局的计算，所以越来越倾向于通过设置 box-sizing:border-box 来指定为 IE 盒模型，默认为 content-boxW3C 盒模型。

CSS3 中推出了弹性盒子 Flex Box，一种新的布局模式 CSS Flexible Box Layout Module。用于在单个维度（行或列）中显示项目的布局模型。旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。目前已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。容器内包含了一个或多个弹性子元素。设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

flexbox 布局与方向无关，不同于常规布局（基于垂直的块 block 和基于水平的内联 inline），而是基于弹性流动方向 flex-flow，最适合应用程序的组件和小规模布局。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

容器的属性：

flex-direction:决定主轴的方向。

flex-direction: row | row-reverse | column | column-reverse;

flex_wrap：如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

flex_flow：是flex-direction和flex-wrap属性的简写。默认值为row nowrap.

flex-flow: <flex-direction> || <flex-wrap>;

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

justify-content: flex-start | flex-end | center | space-between | space-around;

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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

align-items: flex-start | flex-end | center | baseline | stretch;

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

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

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性：

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

order: <integer>;

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

flex-grow: <number>;

当前项可分得的剩余空间 = ( 当前项flex-grow值/所有项flex-grow值之和 ) * 剩余总宽度

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

flex-shrink: <number>;

当前项收缩的宽度 = （当前项flex-shrink * 当前项flex-basis）/（所有项 flex-shrink 与各自flex-basis乘积之和） * 需收缩的总宽度

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

flex-basis: <length> | auto;

auto 的意思是首先看当前项有没有明确设置宽度，如果有则使用该宽度；如果没有，则以包含的内容决定宽度。

content 是不管当前项是否明确设置了宽度，一律以内容决定宽度。

flex：flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

该属性有两个快捷值：auto (1 1 auto) ，none (0 0 auto)，1（0 0 0%）。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch; flex 布局经典应用，宽度等分，高度等分，间隔等分等。

<section>

  <nav>

   <ul>

 <li><a href="#">科技</a></li>

 <li><a href="#">新能源</a></li>

 <li><a href="#">农业</a></li>

 <li id="right"><a href="#">有色金属</a></li>

   </ul>

  </nav>

 </section>

section{

border: 1px solid red;

}

nav ul {

display: flex;

justify-content: space-between;

margin: 0 -10px;

padding: 0;

}

li{

list-style: none;

margin: 0 10px;

padding: 0;

}

a {

text-decoration: none;

color: #000;

border: 2px solid rgb(96, 139, 168);

border-radius: 5px;

background-color: rgba(96, 139, 168, .2);

padding: 10px;

display: block;

}


#right {

/*

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +'border-right-width' + 'margin-right' = width of containing block

当其中一个属性值为 auto 时，需满足上述规则。所以能够使得元素右对齐。常见的 margin:0 auto，能够使得元素水平居中也是基于此规则。

*/

margin-left: auto;

}

<section>

<div id="content">

<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>

  </div>

<div id="content">

<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>

  </div>

<div id="content">

<p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>

  </div>

 </section>

section{

border: 1px solid red;

display: flex;

flex-flow: column;

height: 600px;

}

#content{

flex: 1;

}

总结的并不太好，不过还是留存吧。主要是要了解 flex 伸缩性以及复合属性的计算。

原文地址：https://zzfd.github.io/2021/02/22/flex 布局总结

参考资料：如有侵权，请告知，将第一时间删除部分内容。

https://blog.csdn.net/Hotice888/article/details/105551724?share_token=4b815afc-49f3-445d-9a44-f39fdafc7bec

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://developer.mozilla.org/zh-CN/docs/Glossary/Flexbox