display 弹性盒子 | 阅读笔记 | 青训营

display

• block
• inline
• inline-block
• flex
• grid

弹性盒子Flexbox——display:flex

它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。

例如： 你想让如图三个各自独占一行的元素，在同一行显示 源代码：

.box1 {
	background-color: red;
}
.box2 {
	background-color: yellow;
}
.box3 {
	background-color: blue;
}

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

当我们把display: flex添加到它的父元素时，这三个元素就自动按列进行排列。 给上述css代码加入如下代码：

.wrapper {
  display: flex;
}

设置flex属性

我们可以看到，最终虽然实现了效果，但是左边有留下很大的空白，这时候，如果想让它们填满空白，只需要给它们所有的子元素添加flex属性即可。 在css中再添加如下代码：

.wrapper > div {
  flex: 1;
}

但是flex属性的值，是灵活变化的。给每一个子元素都添加相同的flex属性，会使得子元素会自己调整到三元素皆为等宽的空间。如果三个元素的flex属性不同，则占用空间也会按照比例来调整。 例如，此时将上述的代码块改为：

.wrapper > .box1,.box2 { /* 只调整了 box1 和 box2 */
  flex: 1; 
}