认识flex布局(弹性布局)
一、概念
flex布局基本所有浏览器都支持
目前特别再移动端用的最多,目前pc端也使用的越来越多
- 由flex container开启布局
- 内部的元素成为flex item
<style>
#box1>div {
/*
开启flex布局
flex:块级元素(当成块显示)
inline-flex:行内元素(在同一行显示)
*/
display:inline-flex;
width:100px;
min-width:960px;/*最小缩放到960px*/
height:300px;
background-color:#ff0000;
}
/*子元素*/
#box1>div:first-child {
flex-grow: 2;
}
#box1>div:nth-child(2) {
flex-grow: 5;
}
#box1>div:last-child {
flex-grow: 2;
}
</style>
<div id="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!--strong是行内元素-->
<strong></strong>
二、flex的使用
2.1 容器的属性:
开启flex布局
display:flex;
Justify-content:水平对齐方式(父)
Justify-content:flex-start;/*默认值与main start对齐*/
Justify-content:flex-end;/*与main end 对齐*/
Justify-content:center;/*居中对齐*/
Justify-content:space-between;
/*flex items之间的距离相等
与main start 和main end 两端对齐*/
Justify-content:space-evenly;/*
flex items之间的距离相等
flex items与main start、main end之间的距离等于flex items之间的距离*/
Justify-content:space-around;/*(两头空白)
flex items之间的距离相等
flex items与main start、main end之间的距离是flex items之间距离的一半*/
align-items:交叉(纵)轴上的对齐方式(父)
align-items:stretch;/*默认值,项目被拉伸以适应容器*/
align-items:flex-start;/*项目位于容器开头(垂直居上)*/
align-items:flex-end;/*项目位于容器结尾(垂直居下)*/
align-items:center;/*项目位于在纵轴上中间对齐(垂直居中)*/
align-items:baseline;/*基线对齐(第一行做为基线)*/
flex-direction
flex-direction:column;/*设置容器垂直布局*/
flex-direction:row;/*默认水平布局*/
flex-wrap:换行显示方式(父)
让弹性盒元素在必要的时候拆行
flex-wrap:nowrap; /*默认不换行*/
flex-wrap:wrap; /*可以换行*/
flex-wrap:wrap-reverse; /*换行反转*/
2.2 项目的属性
伸缩盒子中每一个元素称为一个项目item
flex-grow:分配页面份额比例
flex-grow:1;/*子元素占用一个份额的比例*/
order:项目的排列顺序。数值越小,排列越靠前
order:<integer>;;/*子元素占用一个份额的比例*/
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink: <number>; /* default 1 */
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch;