flex

1. 术语

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

2. 容器属性

序号	属性	描述
1	`flex-flow`	主轴方向与换行方式
2	`justify-content`	项目在主轴上的对齐方式
3	`align-items`	项目在交叉轴上的对齐方式
4	`align-content`	项目在多行容器中的对齐方式

3. 项目属性

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

容器属性代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex容器 容器属性</title>
    <style>
        main{
            /* width: 30em; */
            height: 20em;
            background-color: lightskyblue;
            display: flex;
            /* flex-flow     主轴方向与换行方式  */
            /* flex-flow: row nowrap;默认为水平排列 不换行 ,wrap为换行显示*/
            flex-flow: row nowrap;
            /* flex-flow: column;垂直方向排列 */
            flex-flow: column;
        }
        /* justify-content 项目在主轴上的对齐方式 */
        main{
            /* 水平方向 */
            /* justify-content: flex-start;左对齐默认值 */
            justify-content: flex-start;
            /* justify-content: flex-end;右对齐 */
            justify-content: flex-end;
            /* justify-content: center;居中对齐 */
            justify-content: center;
             /* 将项目视为一个个独立的个体,在项目之间进行分配 */ 
            /* justify-content: space-between; 二端对齐 */
            justify-content: space-between;
            /*justify-content: space-around; 分散对齐 */
            justify-content: space-around;
            /*justify-content: space-evenly; 平均对齐 */
            justify-content: space-evenly;
        }
        main{
            /* 垂直方向 */
            /* align-items: stretch;默认值元素被拉伸以适应容器 */
            /* align-items: stretch; */
            /* align-items: flex-start;元素位于容器的开头弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。 */
            align-items: flex-start;
            /* align-items: flex-end; 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。 */
            align-items: flex-end;
            /* align-items: center;元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置，（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。 */
            align-items: center;
        }
        .div{
            width: 5em;
            /* height: 3em; */
            background-color: lightsalmon;
            line-height: 3em;
            text-align:center;
        }
    </style>
</head>
<body>
    <main>
        <div class="div">div1</div>
        <div class="div">div2</div>
        <div class="div">div3</div>
        <div class="div">div4</div>
        <div class="div">div5</div>
    </main>
</body>
</html>

flex项目属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> flex项目属性</title>
    <style>
        main{
            /* width: 30em; */
            height: 20em;
            background-color: lightskyblue;
            display: flex;
            /* 分散对齐 */
            justify-content: space-between;
        }
        .div{
            width: 5em;
            height: 3em;
            background-color: lightsalmon;
            line-height: 3em;
            text-align:center;
        }
        /* flex: flex-grow flex-shrink flex-basis */
        /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
        /* 默认会上,不放大或收缩 */
        .div{
            /* 默认值 */
            flex: 0 1 auto;
            /* 也可写成 */
            flex: initial;
            /* 允许放大和收缩 */
            flex: 1 1 auto;
            /* 缩写 */
            flex: auto;
            /* 禁止放大和收缩 */
            flex: 0 0 auto;
            /* 缩写 */
            flex: none;
            /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
            flex: 1;
            /* 等于  flex: 1 1 auto; 值越大放大的倍数远大*/
            /* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
        }
    </style>
</head>
<body>
    <main>
        <div class="div">div1</div>
        <div class="div">div2</div>
        <div class="div">div3</div>
        <div class="div">div4</div>
        <div class="div">div5</div>
    </main>
</body>
</html>

弹性布局小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex弹性布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header,footer{
            height: 8vh;
            background-color: darksalmon;
        }
        .container{
            height: 82vh;
            display: flex;
            margin: 1em 0;
        }
        .container>aside{
            width: 20em;
            min-height: inherit;
            background-color: khaki;
        }
        .container main{
            flex: 1;
            background-color: lawngreen;
            margin: 0 1em;
        }
    </style>
</head>
<body>
    <header>页眉</header>
    <div class="container">
        <aside>左边栏</aside>
        <main>主体</main>
        <aside>右边栏</aside>
    </div>
    <footer>页脚</footer>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

js的数组详解及6个常用函数

2019-12-19 22:16:07