Flex布局
目标:flex盒子的布局原理;flex布局;flex的常用属性
{display:flex;} (一般用在移动端)
有flex样式
样式中没有flex样式
布局原理:1.当我们为父盒子设为flex布局以后,子元素的float,clear,vertical-align将无作用 2.通过对父盒子添加flex属性,控制子盒子的位置和排列方式*(父元素叫做容器,子元素叫做项目)
常见的父项属性:flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
1.flex-direction:
-
row:默认值从左到右(1,2,3)
-
row-reverse:从右到左(3,2,1)
-
column:从上到下
-
column-reverse:从下到上
按列排列display:flex; flex-direction:column;
2.justify-content -
flex-start:默认值从头部开始(主轴为X轴,从左到右)(1,2,3)
-
flex-end:从尾部开始排列(1,2,3)
-
center:在主轴居中对齐
-
space-around:平分剩余空间
-
space-between:先贴两边然后再平分剩余空间(比较重要)
div{ width:80%; height:500px; background-color:blue; display:flex; flex-direction:column; justify-content:space-between; }
写在父元素的div中
3.flex-wrap(默认不换行,如果放不开,会减小子元素的宽度,放到父元素里面) -
nowrap:不换行
-
wrap:换行
4.align-items -
flex-start:默认值,从上到下
-
flex-end:从下到上
-
center:挤在一起居中(垂直居中)
-
stretch:拉伸(子盒子不要给高度,沿着侧轴拉伸)
5.align-content(用于多行的情况,就是换行的情况下,单行下无效) -
flex-start:默认值,从侧轴头部开始排列
-
flex-end:从侧轴尾部开始排列
-
center:侧轴中间显示
-
space-around:子项在侧轴平分剩余空间
-
space-between:子项在侧轴先分布在两头,在平分剩余空间
-
stretch:设置子项元素高度平分父元素高度
6.flex-flow
先写主轴方向,在写子元素是否换行flex-flow:column wrap;
常见的子项属性:
flex(子项目占得份数)-弹性布局
align-self(控制子项目自己在侧轴的排列方式)
order(属性定义子项的排列顺序–前后顺序)
1.flex属性(分配子项目剩余空间) -
flex:<number>
默认为0
```html
<style type="text/css">
section{
display:flex;
height:150px;
width:80%;
background-color: pink;
}
section div:nth-child(1) {
width:100px;
height:150px;
background-color: blue;
}
section div:nth-child(3) {
width:100px;
height:150px;
background-color: purple;
}
section div:nth-child(2) {
width:100px;
height:150px;
background-color: yellow;
flex:1;
}
</style>
如果想要整个父元素平均分为几等分,那么就不给子元素设置宽度和高度,其余均为剩下宽度
``
2.align-self
flec-end,flex-start等都和上边一样
是写在子元素自己的样式中,不用写在父元素中
3.order
数值越小,排列越靠前,默认值为0(设置的值比默认值小,被设置的元素就去前边)
```html
div span{
width:70px;
height:100px;
background-color:pink;
}
div span:nth-child(2){
order:0;
}
</style>
</head>
<body>
<div>
<span>2</span>
<span>5</span>
<span>7</span>
</div>
</body>
在正常状态下
div span{
width:70px;
height:100px;
background-color:pink;
}
div span:nth-child(2){
order:-1;
}
</style>
</head>
<body>
<div>
<span>2</span>
<span>5</span>
<span>7</span>
</div>
</body>
``
在改变order值后,第一个子元素和第二个子元素调换位置