css中Flex布局要素的介绍（附代码）

flex布局为 "弹性布局"，任何一个元素都可以通过设置css属性 display:flex; webkit内核浏览器为 display: -webkit-flex;指定元素为Flex布局。采用Flex布局的元素，称之为"容器"(flex container), 它其中的所有的子元素称之为Flex项目(flex item);

容器的属性

flex-direction

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

flex-wrap

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

flex-flow

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

justify-content

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

align-items 定义项目在交叉轴上如何对齐。选择值flex-start(交叉轴的起点对齐) | flex-end(交差轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(项目未设置高度或设为auto，将占满整个容器的高度)

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

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

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

项目的属性

order

.item {   order: <integer>; }

flex-grow

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

flex-shrink

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

flex-basis

.item {   flex-basis: <length> | auto; /* default auto */ }

flex

.item {   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

align-self

.item {   align-self: auto | flex-start | flex-end | center | baseline | stretch; }

以上就是css中Flex布局要素的介绍（附代码）的详细内容，更多内容请关注技术你好其它相关文章！