我也是在工作之后才听说到的弹性盒子模型.
以前基本上都是div+css布局书写,工作之后不管是移动端还是pc端慢慢的都接受了使用弹性盒子布局
而且现在很多浏览器对弹性布局支持也挺好的,这里也提前打个预防针,比弹性盒子布局更好的 网格布局 grid 因为兼容性的问题 现在还没有普及。未来的新布局肯定是 网格布局终究会慢慢取代弹性布局
不过上面那些都是后话了，现在我们还是不如今天的正题。
弹性盒子布局可以说是 一维布局 就是在一条直线上进行布局。
平常我们要做到下面的布局,以前我们要通过float来实现
然后实在每个子类div中 加上一个 float:left;
// 在弹性布局中 我们直接在父元素上加上一个 display:flex;就可以达到上面的效果
.parent{
border:1px solid #f00;
display: flex;
}
.child{
height: 200px;
width: 200px;
}
.child:first-child{
background-color: #f00;
}
.child:nth-child(2){
background-color: #0f0;
}
.child:nth-child(3){
background-color: #00f;
}
.child:last-child{
background-color: #f0f;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
看了上面的例子,算是提前简单了解下,在正式讲解之前我们先来了解下概念性东西。
1.弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
2.CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行
上面算是官方上的一种解释吧,可能看完之后还是不太懂是做什么可。
简单上说就是父元素在一条线上,然后所有子元素在这条线上进行布局。
首先弹性布局 默认是 横线布局 这条横线叫做 弹性布局中的 主轴
还有一个概念就是侧轴 侧轴和主轴是 呈交叉显示。如下图所示
因为是横线 所以就是 row 代表主轴 竖线代表侧轴 column
我们也可以调整主轴和侧轴方向
主轴方向默认是从左到右 我们也可以从右到左
flex:direction:row-reverse; // 反转
我们也可以让他们 呈侧轴 显示
flex-direction:column; 然后就是竖向排列了。
这个我就不演示了
2.还有比较常用的就是
justify-content:space-between; 俩边元素靠边显示,浏览器自动帮我们计算他们之间的间距是不是很有用
justify-content:space-around; // 元素之间有间隔
元素之间的距离都是自动算好的 ,不用我们在计算了
3.align-items:center; 侧轴 居中垂直显示
自动帮你计算距离上下俩边的距离。
看了这些简单的介绍,是不是觉得很有意思弹性布局.
注意哈 当你给元素设置了弹性布局之后 浮动 定位 什么就失效了
算是简单的了解吧 想要什么了解 可以去 w3cschool 中再看看一些详细的属性 其实没有那么高大上 常用的也就那几个属性 记住 然后练习熟练了就可以了
