d性盒子flex布局

d性盒子布局
<div style="display: flex;flex-direction:row;justify-content:space-between ">

1flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

5align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余中均为60px。

flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：

center使用最多，自然不会陌生，在纵轴中心位置排列：

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。
6align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。

flex-start ，center，flex-end 与align-items属性表现一致：

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。
介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。

1order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

3flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

上图中第二个项目flex-shrink为0，所以自身不会缩小。

4flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

5flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

6align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：

这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“d性布局”，flex布局有以下几个特点：

接下来就将对flex布局的几个重要知识点进行归纳。

采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。

如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。

flex container（flex容器）有如下六个属性：

该属性主要有以下值：

该属性主要有以下值：

默认值为row nowrap，可以以如下方法设定该属性：

该属性主要有以下值：

该属性主要有以下值：

该属性主要有以下值：

flex item（子元素）有如下六个属性：

该属性默认值为0。
如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。

该属性默认值为1。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。

默认值为0 1 auto。可以以如下方式设定该属性：

数值越小，排列越靠前，默认为0。

即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧

如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto;
实现手机上中下布局：

以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。

博客原地址： >

传统布局：

flex布局：

使用范围：
1、如果是PC端页面布局，建议使用传统布局
2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flexd性布局

flex意为d性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

设置侧轴排列

justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex布局中子元素也存在着相对应的一些属性

flex属性定义子元素分配 剩余空间 ，用flex来表示占的多少份，默认为0
针对这个，可以先了解有名的CSS布局 圣杯布局 以及 双飞翼布局 ,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

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

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。

很长一段时间, 我知道有 flex 这个布局方式, 但是始终没有去学它 3点原因:

最近由于开发需要, 学习了下WeUI的实现 , 发现里面大量使用了 flex 布局, 于是决定学习一下

Flexbox Layout , 官方名为 CSS Flexible Box Layout Module , 意为"d性布局", 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的 网格布局 CSS Grid Layout Module ) flex 是 flexible 的缩写

任何一个容器都可以指定为flex布局。

行内元素也可以使用flex布局。

采用flex布局的元素被称为 flex容器 (flex container) , 它的子元素即为 flex元素 (flex item)

flex容器中包含两个相互垂直的轴, 即 主轴 (main axis) 和 副轴 (cross axis)

flex元素沿主轴从 主轴起点 (main start) 到 主轴终点 (main end) 依次排布

如果flex容器包含多行flex元素, 则 flex行 (flex lines) 沿副轴从 副轴起点 (cross start) 到 副轴终点 (cross end) 依次排布

单个flex元素占据的主轴空间叫做 主轴长度 (main size) , 占据的副轴空间叫做 副轴长度 (cross size)

Getting Dicey With Flexbox 中提到:

前一段时间同事做过 video 相关的开发, 踩到各种坑, 因此我知道 video 的支持不那么好, 特别是在Android上 让我惊奇的是 flex 竟然比 video 的支持更好

从 CanIUse 的数据来看, flex 的支持度是: 8265% (支持) + 1417% (部分支持) = 9681% , 而 video 的支持度是: 9248% 浏览器对 flex 的支持好像并没有特别好

但是有微信的WeUI使用了 flex 布局, 我觉得在移动端 flex 应该还是支持度比较高的

所以, 如果你是做移动端开发的, 可以优先考虑 flex

下面就开始介绍与 flex 布局相关的属性 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素

注意: 以下属性值都可以有 initial (该属性的默认值)和 inherit (继承自父元素), 本处省略

这类属性有6种, 分别为:

注意:

注意: row 和 row-reverse 受到了 direction 属性(默认值为 ltr , 可改为 rtl )的影响

注意: 此属性只在flex容器中有 多行 flex元素时才有作用

这类属性有6种, 分别为:

注意: flex元素的 float , clear 和 vertical-align 会失效

当flex元素有父元素时, 它的 align-self: auto 即为父元素的 align-items 属性; 否则(无父元素时), 相当于 stretch

当有剩余空间时, flex元素会根据 flex-grow 按比例分配剩余空间

默认值 0 代表, 即使有剩余空间, 该flex元素也不放大

当flex容器空间不足时, flex元素会根据 flex-shrink 按比例缩小

flex-shrink 为 0 则表示, 即使flex容器空间不足, 该flex元素也不缩小

flex-basis 定义了分配剩余空间之前flex元素的初始大小, 可为长度值(如 20% , 5rem 等)或 auto 等关键词

flex-basis: auto 表示, 以 flex元素的主轴长度 为 flex-basis 若flex元素的主轴长度也是 auto , 则以flex元素内容(即所有子元素)的大小为 flex-basis

除了 auto 还有 content , max-content , min-content 和 fit-content 关键词, 但是现在浏览器对它们的支持太少, 可以忽略

(敲黑板) 同学们注意, 这里是重点!

这里的 可选值 我参照了 W3C flexbox 的写法 其中:

举例来说, a | [ b || c ] 包含的可能情况有 a , b , c , b c , c b

现在回过头来再看 none | [ <‘flex-grow’> <‘flex-shrink’> || <‘flex-basis’> ] 就清晰多了

注意, none 是一个特殊值, 相当于 0 0 auto

另外, 如果 flex 中不指定:

注意: flex 的初始值是 0 1 auto , 即由每个 flex 因子本身的默认值组成(比方说 flex-grow 的默认值就是 0 )

但是 , 如果利用 flex 设置了至少一个 flex 因子, 那么没被设置的那些 flex 因子的默认值(按grow, shrink, basis的顺序)分别是 1 1 0

我来举几个栗子

W3C建议使用简写形式 flex , 因为它可以方便地应对下面4种 常见情况

自此, 我们已经知道了 flex-grow , flex-shrink 和 flex-basis 的作用 根据这三个值, 计算flex元素的大小只需三步:

第一步: 计算元素的 flex-basis , 有两种情况: 1 具体的长度值, 或, 2 auto (即flex元素的大小) (这里忽略了 content 等目前支持还不完善的关键词)

第二步: 计算剩余空间, 即 剩余空间 = flex容器的内部空间 - flex元素flex-basis值的总和

第三步: 按照 flex 因子(放大时为 flex-grow ; 缩小时为 flex-shrink )分配剩余空间到每个元素 flex元素的最终大小 = flex-basis - flex-factor 剩余空间

举个栗子

假设flex容器的内部空间为 200px , flex元素的大小的总和是 160px 看起来, 还有 200 - 160 = 40px 的剩余空间, 应该放大flex元素, 是不是 不一定! 要看它们的 flex-basis 总和

假设它们的 flex-basis 总和是 300px , 那么剩余空间应该是 300 - 200 = -100px 此时剩余空间是 负数 , 应该以 flex-shrink 对每个flex元素在 flex-basis 的基础上进行 缩小

下例中, 所有flex元素本身的大小为 80px , 元素中为 flex 值

200px

0 1 auto

0 3 auto

0 1 150px

0 3 150px

125px

75px

你可以看到, 第一行的flex元素因为设置了 flex-basis:auto , 所以它们的 flex-basis 就相当于元素大小, 即 80px , 即 flex-basis 总和为 160px , 不足容器的 200px 空间, 此时应该放大元素 但又由于元素的 flex-grow 为 0 , 所以每个元素分配到 0 40 = 0px 的剩余空间, 即不放大

第二行的flex元素设置了 flex-basis:150px , 所以它们的 flex-basis 总和为 300px , 超过了容器的 200px 空间, 故按照 flex-shrink (比例为 1:3 )进行缩小 由于剩余空间为 -100px , 所以第一个元素应缩小 25px 变成 125px , 第二个元素应缩小 75px 变成 75px

绝对flex: 从0开始分配空间

第一行中 flex-basis 为 0 , 表示每个flex元素的初始大小都视为 0 此时, 剩余空间就是"flex容器的大小"

相对flex: 从flex元素大小开始分配空间

第二行中 flex-basis 为 auto , 表示每个flex元素的初始大小都是它本身的大小 此时, 剩余空间就是"flex容器的大小 - flex元素大小的总和"

呃 flex的东西还是挺多的, 特别是 flex 因子相关的部分, 得花点儿时间理解

但是, 我相信学flex是值得的, 谁用谁知道!

Flex布局的特点：
1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
2、flex布局可以实现空间自动分配，自动对齐（flexible：d性、灵活）
3、flex适用于简单的线性布局，更复杂的布局要交给grid布局

图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。

（1）、flex-direction常用得属性值有 row 、 row-reverse 、 column 、 column-reverse ,默认情况下属性值是 row 。
HTML

CSS
CSS

（3）、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。
CSS
CSS

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）

他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位

每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end

容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size

flex布局下，容器和项目都有其各自的属性

决定主轴的方向，即决定项目的排列方向，其属性值有

决定了当一行放不下所有的项目时，其换行与否以及换行方式

定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心

在容器内具有多根主轴线时，可以定义这些轴线的对齐方式

align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致

定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层

设置了项目的放大比例，其默认值为1。

设置了项目的缩小比例，默认值为1。

在分配多余空间之前，为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。

---