布局

最新推荐文章于 2022-07-02 10:42:39 发布

feelin dejavu

最新推荐文章于 2022-07-02 10:42:39 发布

阅读量218

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_53222863/article/details/113749588

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文总结自://www.html.cn/archives/7212 https://www.html.cn/archives/7236

Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，具有灵活性

1、给容器添加display:flex属性

给父元素添加disply:flex属性，默认情况下，flex item(flex项)沿着主轴从左到右排列。这就是为什么 flex 容器应用了 display: flex 属性后，你的矩形子元素(flex项)就会默认排列在一条水平线上的原因。

2、容器的属性

1、flex-direction属性

flex-direction 决定了主轴的方向。

四个属性值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

注意：flex-direction: column 并不是把矩形子元素(flex项)从主轴移到交叉轴上对齐，而是让主轴自身从水平变成垂直。

示例：

<style>
    .box{
        width: 1200px;
        height: 800px;
        background-color: pink;
        display: flex;
        flex-direction:column;
        flex-direction:column-reverse;
    }
    .a{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
    .b{
        width: 300px;
        height: 300px;
        background-color:coral;
    }
    .c{
        width: 250px;
        height: 250px;
        background-color:cornflowerblue;
    }
</style>
<body>
    
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

2、justify Content属性

justify-content控制 flex item(flex项) 在主轴上的对齐方式。

共五个属性值：

flex-start（水平靠左）
flex-end（水平靠右）
center（水平靠中心）
space-between（水平先两端不产生间隔，再中间平分）
space-around（水平两端间隔为两个矩形间隔的一半）

a.space-between 是两端对齐，使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

b.space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。

3、align Items 属性

align-items 属性定义了 flex item(flex项) 在交叉轴(cross axis)上的对齐方式。

五个属性值：

flex-start（垂直靠上）
flex-end（垂直靠下)
center（垂直靠中）
stretch（垂直使每个flex项的高度占据整个交叉轴）
baseline（按照他们段落标签的文本基线对齐）

注意：

1、对于 align-items: stretch 来说，必须将每一个矩形子元素(flex项)的高度设置为 auto，否则 height 属性将会覆盖该 stretch

2、对于 align-items: baseline 来说，要注意如果去掉段落标签或者没内容，矩形子元素(flex项)就会按照每个矩形的底部对齐

示例：

<style>
    .box {
        width: 1200px;
        height: 800px;
        background-color: pink;
        display: flex;
        align-items: baseline;
    }

    .a {
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        text-align: center;
        line-height: 200px;
    }

    .b {
        width: 300px;
        height: 300px;
        background-color: coral;
        text-align: center;
        line-height: 300px;
    }

    .c {
        width: 250px;
        height: 250px;
        background-color: cornflowerblue;
        /* text-align: center; */
        /* line-height: 250px; */
    }
</style>

<body>

    <div class="box">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
</body>

2、项目的属性

1、order属性

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

2、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大（看份数占比）

3、flex-shrink属性

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

**注意：**如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4、flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6、align Self属性

align-self 允许你单独设置每个 flex item(flex项) 的对齐方式。

五个属性值同上：

flex-start（垂直靠上）
flex-end（垂直靠下)
center（垂直靠中）
stretch（垂直使每个flex项的高度占据整个交叉轴）
baseline（按照他们段落标签的文本基线对齐）

注意：它会覆盖 flex container(flex 容器) 的 align-items 属性。默认情况下，所有 flex item(flex项) 的 align-self 属性均为 auto，如果没有父元素，则等同于stretch。他们继承了 flex 容器的 align-items 属性。

示例：

<style>
    .box {
        width: 1200px;
        height: 800px;
        background-color: pink;
        display: flex;
        align-items:center;
    }

    .a {
        width: 200px;
        height:auto;(使其能够有stretch效果)
        background-color: aquamarine;
        align-self:stretch;
    }

    .b {
        width: 300px;
        height: 300px;
        background-color: coral;
    }

    .c {
        width: 250px;
        height: 250px;
        background-color: cornflowerblue;  
    }
</style>

feelin dejavu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局

本文总结自://www.html.cn/archives/7212 https://www.html.cn/archives/7236Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，具有灵活性1、给容器添加display:flex属性给父元素添加disply:flex属性，默认情况下，flex item(flex项)沿着主轴从左到右排列。这就是为什么 flex 容器应用了 display: flex 属性后，你的矩形子元素(flex项)就会默认排列在一条水平线上的原.
复制链接

扫一扫