Flex 布局容器属性

最新推荐文章于 2023-12-25 14:51:42 发布

星氤

最新推荐文章于 2023-12-25 14:51:42 发布

阅读量292

点赞数

分类专栏：样式文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45582966/article/details/115480172

版权

样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

dispaly: flex | inline-flex

将父元素设置为Flex布局容器，flex：容器对外表现为块元素；inline-flex：容器对外表现为行元素，对内两者无差

.container {
    display: flex | inline-flex;
}
<div class="container"></div>

设置在容器上的六种属性

横向/纵向布局/设定主轴
flex-direction: row | row-reverse | column | column-reverse;
对应：横向起点在左侧（主轴为横向） | 横向起点在右侧（主轴为横向）| 纵向起点在上（主轴为纵向） | 纵向起点在下（主轴为纵向）
此时宽度或高度如果超出父元素，子元素会自动调节
一行放不下时换行布局
flex-wrap: nowrap | wrap | wrap-reverse;
对应：不换行 | 换行，第一行在上面 | 换行，第一行在下面
flex-flow
flex-direction 和 flex-wrap 的简写
项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
对应：与主轴起点对其 | 与主轴终点对其 | 居中 | 两端对齐，其余自适应 | 子元素两侧间隔相等
主轴看flex-direction属性

 .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* flex-flow:row wrap; */
        justify-content: center;
        width: 500px;
        height: 500px;
        background-color: aqua;
    }

    .item {
        width: 100px;
        height: 100px;
        background-color: darkblue;
        margin: 3px;
    }
<div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
</div>

交叉轴上如何对齐（flex-direction定义主轴方向，与主轴方向垂直的为交叉轴）
align-items: flex-start | flex-end | center | baseline | stretch;
对应：与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 居中对齐 | 项目第一行文字的基线对齐 | 如果项目未设置高度或者为 auto，项目将占满整个容器的高度（默认值）。
多根轴线的对齐方式，项目排列只有一行时，该属性不起作用，需设置flex-flow属性
align-content : flex-start | flex-end | center | space-between | space-around | stretch;
对应：与交叉轴的起点对齐 | 与交叉轴的终点对齐 | 居中对齐 | 与交叉轴两端对齐，其余自适应 | 子元素两侧间隔相等 | 如果项目未设置高度或者为 auto，项目将占满整个容器的高度（默认值）。