html 布局 flex,CSS flex布局

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

.box{

display: flex;

}

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

.box{

display: inline-flex;

}

webkit内核的浏览器必须加上前缀-webkit

.box{

display: -webkit-flex; /* Safari */

display: flex;

}

++设置flex布局之后，子元素的clear，float，vertical-align属性将失效++

容器的六个属性

1.flex-direction

决定主轴的方向，即项目的排列方向

.box{

flex-direction:row

}

值：

row：从左到右，起点在左端

row-reverse：从右到左，起点在右端

column：从上到下，起点在上沿

column-reverse：从下到上，起点在下沿

2.flex-wrap

默认情况下，项目都排在一条直线上(又称“轴线”)。flex-wrap定义如果一条轴线排不下，如何换行

.box{

flex-wrap:nowrap|wrap|wrap-reverse

}

值：

nowrap：不换行(默认，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

3.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap

.box{

flex-flow:

}

4.justify-content

定义项目在主轴上的对齐方式

.box{

justify-content:flex-start;

}

值：

flex-start：(默认)左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间将各相等

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

5.align-items

定义项目在交叉轴上的对齐方式

.box{

align-items:flex-start;

}

值：

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴中点对齐

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

stretch：(默认值)，若项目没有设置高度或设置为auto，将占满整个容器的高度

6.align-content

定义了多根轴线的对齐方式。若项目只有一根轴线，则不起作用

.box{

align-content:flex-start

}

值:

flex-start:起始端对齐

flex-end：末尾段对齐

space-between：等间距均匀分布，与交叉轴两端对齐，轴线之间的间隔平均分布。

center：居中对齐

space-around：等边距均匀分布，每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch：拉伸对齐

项目属性

1.order属性

定义排列顺序，数值越小越靠前，默认为0

.item{

order:;

}

2.flex-grow

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

.item{

flex-grow:;

}

3.flex-shrink

定义缩小比例。默认为1，如果空间不足，项目将缩小。

4.flex-basis

设置基准大小

表示在不伸缩的情况下子元素的原始尺寸。

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

.item{

flex-basis:|auto

}

它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。

5.flex

flex是flex-grow，flex-shrink，flex-basis的简写形式

默认：0 1 auto

快捷键：auto(1 1 auto)和none(0 0 auto)

6.align-self

允许有单个项目和其他项目不一样的对齐方式

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item{

align-self:auto|flex-start|flex-end|center|baseline|stretch

}

如：

标签：box,flex,auto,align,布局,wrap,对齐,CSS

来源： https://blog.csdn.net/Glichi/article/details/95656806