内容简介：flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线
flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可
.box{
display:flex;
}
注意，在设置了flex布局以后，其所有的子元素的float，clear和vertical- align属性都将失效
父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线
在父元素（box）设置flex后，会有6个属性
box
flex-wrap
flex-flow
justify- content
align-items
align-content
下面我们来依次分析这几个属性
fiex-direction
该属性决定主轴的方向，也就是项目的排列方向，它有4个参数 ， 主轴方向改变后交叉轴的方向也会改变
- flex-direction:row;这个是默认值，默认主轴为水平方向，起点在左端
- flex-direction:row-reverse;主轴为水平方向，起点在右端
- flex-direction:column;主轴在垂直方向，起点在上端
- fiex-direction:column-reverse;主轴在垂直方向，起点在下端
flex-wrap
该属性决定子元素如果不在一条轴线上如何换行
- nowrap:该属性是默认属性，不换行，如果我们设定的item大小在一行上回超出box，那么不会溢出也不会换行，而是item会变形，从而适配当前box
- wrap:正常换行，在第一行正下方
- wrap-reverse:在第一行正上方换行，第一行会默认从底部开始
flex-flow
该属性是flex-direction和flex-wrap属性的简写，默认值是row nowrap;
.box{
display:flex;
flex-flow:row nowrap;
}
justify-content
该属性定义了项目在主轴上的对齐方式
- flex-start：该属性是默认值，从左端对齐
- flex-end：该属性规定从右端对齐
- center：该属性规定居中对齐
- space- between：该属性规定两端对齐，子元素之间的间隔都相等
- space- around：该属性规定每个子元素的两侧的间隔相等，所以子元素之间的间隔比子元素与边框之间的间隔大一倍
align-items
该属性定义项目在交叉轴上如何对齐
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：子元素的第一行文字的基线对齐
- stretch：默认值，如果子元素未设置高度或auto，将占满整个父容器的高度
align-content
定义了多根轴线的对齐方式，如果父元素只有一根轴线，该属性不起作用
- flex-start：与交叉轴的起点对齐
- flex-end：与交叉轴的终点对齐
- cengter：与交叉轴的中点对齐
- space- between：与交叉轴的两端对齐，轴线之间的间隔平均分布
- space-around：每跟轴线之间的距离相等所以轴线之间的间隔比与边框线之间的间隔大一倍
- st retch：默认值，轴线占满整个交叉线
item
在父元素设置了flex属性后，子元素会有以下6个属性
flex-grow flex-shrink flex- basis flex aligr-self
以下面的代码为例，我们来依次了解这些属性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
padding: 0;
margin: 0;
}
div {
display: flex;
width: 100%;
height: 300px;
}
div span {
flex: 1;
border: 1px solid #000;
border-radius: 100%;
margin-right: 30px;
text-align: center;
line-height: 300px;
font-size: 25px;
}
</style>
<title>flex</title>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
order
该属性定义项目的排列顺序，数值越小，排列越靠前，默认为0
div span:nth-of-type(2) {
order: 1;
}
div span:nth-of-type(1) {
order: 2;
}
flex-grow
该属性定义项目的放大比例，默认为0，即使存在剩余空间，也不放大，如果所有子元素都设置该属性为1，那么他们将会等分剩余的空间，如果一个其中一个子元素的flex-grow属性设置为2，那么它将会比其他的子元素多一倍
div span:nth-of-type(1) {
flex-grow: 2;
}
flex-shrink
该属性定义了项目的缩小比例，默认为1，也就是说，如果空间不足，该项目将会缩小，如果所有项目的缩小比例都为1，那么如果空间不足，所有项目都将会等比例缩小，如果其中一个设置为0，那么在空间不足的情况下，其它项目会缩小， 该项目不会缩小，该属性设置负值无效
flex- basis
属性定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，它的默认值为auto，即项目本来的大小，该属性可以设置和width或length属性一样的值，那么项目将占据固定的空间
flex
该属性是flex- grow，flex-shrink和flex- basis的简写，默认值为0 1 auto，后两个属性可选
align-self
该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性，默认值为auto，表示继承父元素的 align-items属性，如果没有父元素，那么等同于 stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
- 四种方法实现──三栏布局（圣杯布局、双飞翼布局）
- 浅谈CSS三栏布局（包括双飞翼布局和圣杯布局）
- css经典布局——圣杯布局
- CSS布局基础——（三栏布局）
- Grid布局 - 一键布局尝试总结~
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
