认识flex布局（弹性布局）

• 一、概念
• 二、flex的使用
• • 2.1 容器的属性：
  • 2.2 项目的属性

一、概念

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布局

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：分配页面份额比例

order：项目的排列顺序。数值越小，排列越靠前

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。