flexbox-弹性盒子详解

来源：互联网发布：中国人种基因知乎编辑：程序博客网时间：2024/05/23 15:35

在传统布局中，我们依赖的是diplay+position+float，使特殊的布局非常不方便。那么今天我们说css3中的弹性盒子，使我们在进行布局时，更加的便捷。

1.display:flex表示的是把盒子设置为弹性盒子。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;}#box>div {flex: 1;/*表示的是每个盒子占一份*/height: 200px;border: 1px solid #000;background-color: red;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div></body></html>

2.flex-direction表示的是盒子的排列方向，有三个属性值，分别为row、column、row-reverse、column-reverse。row表示的是水平从左到右排列，row-reverse表示的是水平从右往左排列，column表示的是垂直从上往下排列，column-reverse表示的是垂直从下往上排列。下面以column-reverse为例，代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;/*表示垂直从下往上排列*/flex-direction: column-reverse;}#box>div {flex: 1;border: 1px solid #000;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div></div></body></html>

3.flex-wrap表示的是否换行，有三个属性，分别为：nowrap,wrap,wrap-reverse。nowrap表示的是不换行，wrap表示的是换行，wrap-reverse表示的是换行并反转。下面以wrap-reverse为例，代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;/*表示的是换行并且反转*/flex-wrap: wrap-reverse;}#box>div {width: 400px;height: 200px;border: 1px solid #000;background-color: red;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box1">4</div><div class="box2">5</div><div class="box3">6</div><div class="box1">7</div><div class="box2">8</div><div class="box3">9</div></div></body></html>

4.justify-content表示的是垂直方向上内容对齐属性，有五个属性值，分别是：flex-start、flex-end、center、space-between、space-around。其中，flex-start表示的弹性盒子向行头紧密填充、flex-end表示的是弹性盒子向行尾紧密填充，center表示的是居中紧密填充，space-between表示的是弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start，space-around表示的是弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;/*表示的是换行并且反转*/flex-wrap: wrap;/*表示的是对齐属性*/justify-content: space-around;}#box>div {width: 400px;height: 200px;border: 1px solid #000;background-color: red;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box1">4</div><div class="box2">5</div><div class="box3">6</div><div class="box1">7</div><div class="box2">8</div><div class="box3">9</div></div></body></html>

5.align-items表示的是垂直方向上的内容对齐属性，有五个属性值，分别是：flex-start、flex-end、center、baseline、stretch。其中flex-start、flex-end、center和上面justify-content的意义是一样的，baseline是以基线为准，stretch表示的是默认情况下的状态，被拉伸。下面以center为例，代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;flex-direction: column;/*表示的是换行并且反转*/flex-wrap: wrap;/*表示的是对齐属性*/align-items: center;}#box>div {width: 400px;height: 100px;border: 1px solid #000;background-color: red;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box1">4</div><div class="box2">5</div><div class="box3">6</div><div class="box1">7</div><div class="box2">8</div><div class="box3">9</div></div></body></html>

6.align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。属性值有：flex-start、flex-end、center、space-between、space-around、stretch。下面以space-around为例，代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}body,html,#box {width: 100%;height: 100%;}#box {/*表示的是把父盒子设置为弹性盒子*/display: flex;/*表示的是换行并且反转*/flex-wrap: wrap;/*表示的是对齐属性*/align-content: space-around;}#box>div {width: 400px;height: 100px;border: 1px solid #000;background-color: red;}</style></head><body><div id="box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box1">4</div><div class="box2">5</div><div class="box3">6</div><div class="box1">7</div><div class="box2">8</div><div class="box3">9</div></div></body></html>

7.order是用来设置元素的顺序。属性值可以设置为number值，设置为几就位于第几位。

以上为基本常用的弹性盒子的属性。

阅读全文

0 0