弹性盒模型

最新推荐文章于 2021-01-09 18:33:10 发布

OJoyha

最新推荐文章于 2021-01-09 18:33:10 发布

阅读量249

点赞数 1

分类专栏：练习文章标签：前端

本文链接：https://blog.csdn.net/OJoyha/article/details/88726873

版权

练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

弹性盒模型

今天学习了弹性盒模型，弹性盒模型其本质上就是Box-model的延伸，用来设计更复杂的版面布局。我将从以下三方面来分享弹性盒模型的学习。

弹性盒模型基础概念

为了直观清晰的介绍弹性盒模型，下面我将引入一张图片，

弹性盒模型按照宽高分为8个点，
水平的主轴：main axis；垂直的纵轴：cross axis；
纵轴的开始位置和边框的交点：cross start；纵轴的结束位置和边框的交点：cross end；
主轴的开始位置和边框的交点：main strat；主轴的结束位置和边框的交点：main end；
单个项目占据主轴的空间距离：main axis；单个项目占据纵轴的空间距离：cross axis

弹性盒模型属性设置

1.flex-direction：主轴的方向（即项目的排列方向） row | row-reverse | column | column-reverse;
row（默认值）主轴为水平方向，起点在左端。
row-reverse 主轴为水平方向，起点在右端。
column 主轴为垂直方向，起点在上沿。
column-reverse 主轴为垂直方向，起点在下沿。
在这里插入图片描述
2.flex-wrap：如果一条轴线排不下，如何换行nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3.justify-content ：定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
在这里插入图片描述
4.align-items：定义项目在交叉轴上如何对齐 flex-start | flex-end | center | baseline | stretch; 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
stretch（默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
在这里插入图片描述
5.align-content：多根轴线的对齐方式，一根轴该属性无效 flex-start | flex-end | center | space-between | space-around | stretch;
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）轴线占满整个交叉轴
在这里插入图片描述

练习

    <style>
    .wrap{
        width: 300px;
        height: 300px;
        border: 1px black solid;
        border-radius: 30px;
        background-color: #cccccc;
        padding: 10px;
        display: flex;
        /* 弹性盒模型 */
        flex-direction: column;
        /* 元素上的项目自顶向下排列 */
    }
    .wrap div{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: black;
    }
    .box{
        width: 300px;
        height: 300px;
        border: 1px black solid;
        border-radius: 30px;
        padding: 10px;
        background-color:#cccccc;
        flex-wrap: wrap;
        display: flex;
        justify-content: flex-end;
        align-content: space-between;
    }
    .box div{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: black;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div></div>
        <div style="align-self:center";></div>
        <div style="align-self:flex-end";></div>
    </div>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果展示：
.warp
.box