![f020b2741472e97726e3b21c47dbf9e7.png](https://img-blog.csdnimg.cn/img_convert/f020b2741472e97726e3b21c47dbf9e7.png)
一、什么是Flex弹性盒?
Flex弹性盒,意为“弹性布局”,用来为盒状模型提供最大的灵活性。
当一个元素 display:flex 的时候,内部元素float会失效,vertical-align也会失效
因此我们至少能确定一点,flex替代了浮动的解决方案。
我们来看一下它的基本特点。
在flex容器当中,div这样的块元素不再独占一行
而是自动排成一行。
![6b84cbe00aac29508d87ea167ca2e3f0.png](https://img-blog.csdnimg.cn/img_convert/6b84cbe00aac29508d87ea167ca2e3f0.png)
这个效果虽然和浮动很像, 但是请记住, 在flex的容器里, 不存在浮动的概念, 我将代码贴出来, 大家可以自行尝试.
<style type="text/css">
html, body {
padding: 0; margin: 15px;
}
.container {
display: flex;
height: 300px; width: 700px;
box-shadow: 0 0 0 1px black;
}
div {
width: 200px; height: 200px;
}
div:nth-child(1) {
background-color: pink;
}
div:nth-child(2) {
background-color: lightseagreen;
}
div:nth-child(3) {
background-color: powderblue;
}
</style>
<body>
<section class="container">
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
<div>
<p>div容器</p>
<p>width: 100px</p>
<p>height: 100px</p>
</div>
</section>
</body>
dispplay: flex的元素,称为Flex容器(flex container),它的所有子元素称为Flex项目(flex item)。
在flex容器当中, 项目的排列方式默认是row(水平的). 可以使用flex-direction属性进行更改
.container {
display: flex;
flex-direction: row; /*这是默认值, 按照row(水平方向)排列*/
}
如果将这个属性进行更改column
.container {
display: flex;
flex-direction: column; /* 按照列column(垂直方向)排列*/
}
效果如下:
![32886a5f7ab84d5434fa8be99aadfdea.png](https://img-blog.csdnimg.cn/img_convert/32886a5f7ab84d5434fa8be99aadfdea.png)
你看, flex容器里的项目, 变成了垂直方向, 由上至下排列
对于一个flex容器来说, 子项目的排列方向, 只有row和column这两种,
怎么样, 很简单把?
当然, 项目不仅可以从左向右, 还可以反过来, 从右向左
.container{
display: flex;
flex-direction: row-reverse;/* 按照行(反方向)排列*/
}
效果如下:
![de706331dbfaf60b415af3854a6cfc90.png](https://img-blog.csdnimg.cn/img_convert/de706331dbfaf60b415af3854a6cfc90.png)
垂直方向也是如此
.container{
display: flex;
flex-direction: column-reverse;/* 按照列(反方向)排列*/
}
![ddba4c57cbc6a086e86d351b2ea1f2e9.png](https://img-blog.csdnimg.cn/img_convert/ddba4c57cbc6a086e86d351b2ea1f2e9.png)
一个flex容器, 子项目默认是不换行的
当然, 想要换行的话, 可以通过flex-wrap属性可以修改
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
我们还可以通过 justify-content属性 设置「主轴」的对齐方式
注意:主轴的方向不一定是水平方向 它是由flex-direction决定的. 可以是 row方向 也可以 column方向, 下面的例子假定主轴为row, 因此column方向为对应 侧轴
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start 可以理解为左对齐
![fe99266ff2137807418ca2877018953d.png](https://img-blog.csdnimg.cn/img_convert/fe99266ff2137807418ca2877018953d.png)
flex-end 可以理解为右对齐
![b5515330546c3458c501660457467872.png](https://img-blog.csdnimg.cn/img_convert/b5515330546c3458c501660457467872.png)
center 居中对齐
![3c25921e5694576d19dba9dbb814e268.png](https://img-blog.csdnimg.cn/img_convert/3c25921e5694576d19dba9dbb814e268.png)
space-between 两侧对齐
![43bc5f9e238ffa4738383d3b1d03e46f.png](https://img-blog.csdnimg.cn/img_convert/43bc5f9e238ffa4738383d3b1d03e46f.png)
space-around 两侧间隔均匀
![836f896dca3cde9fa48598002fa2a7fe.png](https://img-blog.csdnimg.cn/img_convert/836f896dca3cde9fa48598002fa2a7fe.png)
如果flex容器是固定高度的, 且大于了子元素, 这时, 我们可能还需要侧轴(垂直方向)的对齐方式
align-items属性定义项目在交叉轴上如何对齐。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start 可以理解为顶部对齐
![950182d643bf8dc26d587147426723b1.png](https://img-blog.csdnimg.cn/img_convert/950182d643bf8dc26d587147426723b1.png)
flex-end 底部对齐
![34542705c63b7f6fd9c434e6a04c3bf8.png](https://img-blog.csdnimg.cn/img_convert/34542705c63b7f6fd9c434e6a04c3bf8.png)
center 中部对齐
![fbefb960899cd9a8418ddbf1cd3d9be8.png](https://img-blog.csdnimg.cn/img_convert/fbefb960899cd9a8418ddbf1cd3d9be8.png)
baseline 基线对齐
![87eeffc2e3f5d61e287872030f0db53a.png](https://img-blog.csdnimg.cn/img_convert/87eeffc2e3f5d61e287872030f0db53a.png)
stretch 上下两侧对齐
![950182d643bf8dc26d587147426723b1.png](https://img-blog.csdnimg.cn/img_convert/950182d643bf8dc26d587147426723b1.png)
![cb94fd3b2d480ea5d6fbb9dd7ea0dae7.png](https://img-blog.csdnimg.cn/img_convert/cb94fd3b2d480ea5d6fbb9dd7ea0dae7.png)
简单总结一下
弹性盒的容器属性(添加在父元素身上 )
1 display:flex;属性
.box{
display: -webkit-flex; /* Safari或者chrome*/
display: flex;
}
注意:设为Flex布局以后,子元素的float
、clear
和vertical-align
属性将失效。
同时,需要加上-webkit-
前缀,兼容-webkit-低版本写法。
2 flex-direction属性
flex-direction
属性决定主轴的方向(即容器内子元素的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
3 flex-wrap属性
默认情况下,子元素都排在一条线(又称”轴线”)上, 不换行。flex-wrap
属性定义是否换行, 以及换行方式
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
4 justify-content属性
justify-content
属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
5 align-items属性
align-items
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
千锋HTML5学院:css伪元素的实用技巧zhuanlan.zhihu.com
![aca97420f797145214584f83efac5448.png](https://img-blog.csdnimg.cn/img_convert/aca97420f797145214584f83efac5448.png)
![cb0cb2426ec83b981276e495a2edf20d.png](https://img-blog.csdnimg.cn/img_convert/cb0cb2426ec83b981276e495a2edf20d.png)