CSS进阶知识flex弹性布局容器与项目

flex弹性盒模型

flex弹性布局为容器，容器的”子元素”为项目；容器拥有主轴和交叉轴，采用flex布局后，内部盒子的宽高可以自动适应。

一、flex模块化

模块	描述
容器	具有display:flex属性元素
项目	flex容器的”子元素”
主轴	项目排列的轴线
交叉轴	与主轴垂直的轴线

二、flex属性

属性	值
flex-flow	主轴方向与换行方式
justify-content	项目在主轴上的对齐方式
align-items	项目在交叉轴上的对齐方式
align-content	项目在对行容器中的对齐方式

三、容器

3.1 flex-flow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性项目在主轴的排列方式</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            /* 转为flex弹性布局元素 */
            display: flex;
            border: 1px solid #333;
            margin: 1em;
            padding: 1em;
        }
        .container .item{
            background-color: lightgreen;
            height: 5em;
            width: 5em;
            border: 1px solid #333;
            text-align: center;
        }       
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
    </div>
</body>
</html>

当flex为单行容器

/* 单行容器 */
.container{
  flex-flow: row nowrap;
}

当flex为多行容器

/* 多行容器；一行显示不下，即可换行显示 */
.container{
  flex-flow: row wrap;
}

弹性盒子

当flex容器为垂直，并且不换行

.container{
   flex-flow: column nowrap;
}

弹性布局

当flex容器为垂直，并且换行

.container{
  height: 15em;
  flex-flow: column wrap;
}

弹性布局

3.2 弹性项目对齐方式

注意：设置项目在单行容器上轴的对齐前提：主轴必须存在剩余空间

主轴单行容器的对齐方式

属性	值	描述
justify-content	flex-start	左对齐(默认值)
justify-content	flex-end	右对齐
justify-content	center	居中
justify-content	space-between	两端对齐
justify-content	space-around	分散对齐
justify-content	space-evenly	平均对齐

项目布局

交叉轴上的对齐方式

属性	值	描述
align-items	flex-start	交叉轴的起点对齐
align-items	flex-end	交叉轴的终点对齐
align-items	center	交叉轴的中点对齐
align-items	stretch	如果项目未设置高度或设为auto，将占满整个容器的高度(默认值)

四、项目

属性	描述
flex	项目的缩放比例与基准宽度
align-self	单个项目在交叉轴上的对齐方式
order	项目在主轴上排序顺序

4.1 flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto;

属性	值	描述
flex	flex-grow	放大因子
flex	flex-shrink	收缩因子
flex	flex-basis	项目在主轴上的基准宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性项目在主轴的排列方式</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            /* 转为flex弹性布局元素 */
            display: flex;
            border: 1px solid #333;
            height: 15em;
            margin: 1em;
            padding: 1em;
        }
        .container .item{
            background-color: yellow;
            width: 5em;
            margin-bottom: 1em;
            border: 1px solid #333;
            text-align: center;
        }      
        /* 交叉轴的对齐方案 */
        .container{
            align-items: stretch;
            align-items: center;
            align-items: flex-end;
            align-items: flex-start;
        }
        /* 项目属性 flex */
        .container .item{
            flex: 0 1 auto;
            flex: inherit;
            /* 允许放大和收缩 */
            flex: 1 1 auto;
            flex: auto;
            /* 禁止放大和收缩 */
            flex: 0 0 auto;
            flex: none;
            /* 如果只有一个数值，省掉后面两个参数，表示放大基因 */
            flex: 1;
            flex: 2;
            flex: 3;
            /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
        }
        /* 写一个案例,要求第2个和第3个项目的宽度是第1个和第四个2倍 */
        .container .item:nth-child(2),.container .item:nth-child(3){
            flex: 2;
        }
        .container .item:nth-child(1),.container .item:nth-child(4){
            flex: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
</body>
</html>

4.2 align-self

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

align-self

4.2 order
order属性定义项目的排列顺序,数值越小，排列越靠前，默认为0;

flex弹性盒模型

一、flex模块化

二、flex属性

三、容器

四、项目

更多相关文章

随机推荐