css flex布局常用容器属性总结

flex布局又被称为弹性布局，其出现替代了很多经典的布局方式，下面从flex布局中经常会用到的样式和样式的运用来展开。

使用flex布局

---

flex布局在块级容器中可以直接使用display:flex来表示容器内的布局为flex布局

.container{
    display:flex;
}

而对于行内标签，display的属性值可以设置为inline-flex来表示行内标签里面的布局为flex布局

.inline-container{
    display:inline-flex;
}

对于webkit内核的浏览器，必须添加上-webkit前缀

.webkit-container{
    display: -webkit-flex;
    display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

flex布局的常用样式

---

flex-direction

flex-direction表示flex中元素的排列方式，默认为row

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

row：从左到右水平排列

row-reverse：从右到左水平排列

column：从上到下垂直排列

column-reverse：从下到上垂直排列

<div class="dir-row">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="dir-row-reverse">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="dir-column">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="dir-column-reverse">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

div {
    display: flex;
    width: 100px;
    height: 100px;
}

.dir-row {
    flex-direction: row;
}

.dir-row-reverse {
    flex-direction: row-reverse;
}

.dir-column {
    flex-direction: column;
}

.dir-column-reverse {
    flex-direction: column-reverse;
}

flex-wrap

flex-wrap设置flex容器中当一行中的内容超过容器宽度时的排列处理方式，默认为nowrap

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

nowrap：会将超过的内容“强行”挤在同一行，假如元素间有margin值的话会压缩margin值，如果没有的话会压缩每个元素的宽度

wrap：会将超过的元素放到下一行

wrap-reverse：会将超过的元素放在当前行，而没超过的元素放在下一行

<div class="wrap-nowrap">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="wrap-wrap">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="wrap-wrap-reverse">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

div {
    display: flex;
    width: 90px;
    height: 30px;
    margin-bottom: 40px;
}

span {
    display: inline-block;
    width: 30px;
    color: white;
    background-color: red;
}

.wrap-nowrap {
    flex-wrap: nowrap;
}

.wrap-wrap {
    flex-wrap: wrap;
}

.wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
}

flex-flow

flex-flow是flex-direction和flex-wrap合起来写的样式，默认值为row nowrap

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

justify-content

该样式用于设置容器内元素在水平方向上的对齐方式，默认值为flex-start

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

flex-start：左对齐

flex-end：右对齐

center：居中

space-between：元素紧贴容器左右两端，元素间的间距相同

space-around：元素与容器左右两端距离为元素间距离的一半，元素间的间距相同

space-evenly：元素间的间距相同，且两端元素和元素间的间距也是相同的

<div class="start">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="end">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="center">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="between">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="around">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div class="evenly">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

div {
    display: flex;
    width: 200px;
    margin-bottom: 30px;
    background-color: black;
}

span {
    display: inline-block;
    width: 20px;
    color: white;
    background-color: red;
}

.start {
    justify-content: flex-start;
}

.end {
    justify-content: flex-end;
}

.center {
    justify-content: center;
}

.between {
    justify-content: space-between;
}

.around {
    justify-content: space-around;
}

.evenly {
    justify-content: space-evenly;
}

algin-items

该样式用于设置容器内元素在垂直上的对齐方式，默认值为stretch

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

flex-start：以容器的顶部来对齐

flex-end：以容器的底部来对齐

center：以容器的中间来对齐

baseline：按容器内元素的文字来对齐

stretch：当容器内元素没设置高度时默认占满整个容器高度

<div class="start">
    <span class="s1">1</span>
    <span class="s2">2</span>
    <span class="s3">3</span>
    <span class="s4">4</span>
</div>
<div class="end">
    <span class="s1">1</span>
    <span class="s2">2</span>
    <span class="s3">3</span>
    <span class="s4">4</span>
</div>
<div class="center">
    <span class="s1">1</span>
    <span class="s2">2</span>
    <span class="s3">3</span>
    <span class="s4">4</span>
</div>
<div class="baseline">
    <span class="s1">1</span>
    <span class="s2">2</span>
    <span class="s3">3</span>
    <span class="s4">4</span>
</div>
<div class="stretch">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

div {
    display: flex;
    width: 200px;
    height: 100px;
    margin-bottom: 10px;
    background-color: black;
}

span {
    display: inline-block;
    width: 40px;
    text-align: center;
    color: white;
    background-color: red;
}

.s1 {
    height: 20px;
    line-height: 10px;
}

.s2 {
    height: 40px;
    line-height: 20px;
}

.s3 {
    height: 60px;
    line-height: 30px;
}

.s4 {
    height: 80px;
    line-height: 40px;
}

.start {
    align-items: flex-start;
}

.end {
    align-items: flex-end;
}

.center {
    align-items: center;
}

.baseline {
    align-items: baseline;
}

.stretch {
    align-items: stretch;
}

align-content

该样式设置了容器内多行元素的对齐方式，只有一行时该样式无效，默认值为stretch

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

flex-start：第一行紧贴顶部

flex-end：最后一行紧贴底部

center：中间一行居中，其他行贴紧中间行

space-between：不同行行距相同，第一行和最后一行与容器顶部底部贴紧

space-around：不同行行距相同，第一行和最后一行与容器顶部底部距离为行距的一半

stretch：各行占满容器

<div class="start">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="end">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="center">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="between">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="around">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="stretch">
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

div {
    display: flex;
    width: 100px;
    height: 90px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    background-color: black;
}

p {
    width: 100px;
    height: 20px;
    margin: 0px;
    color: white;
    background-color: red;
}

.start {
    align-content: flex-start;
}

.end {
    align-content: flex-end;
}

.center {
    align-content: center;
}

.between {
    align-content: space-between;
}

.around {
    align-content: space-around;
}

.stretch {
    align-content: stretch;
}

---

参考自阮一峰的flex布局教程