CSS3: Flex弹性盒子

最新推荐文章于 2024-10-01 14:17:36 发布

星辰大海_enoch

最新推荐文章于 2024-10-01 14:17:36 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/u012872771/article/details/103680767

版权

flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

弹性盒子包括两部分: flex容器和flex元素

flexbox的两根轴线：

主轴和交叉轴
方向
其实位置和终止位置

初始效果:

主轴水平从左向右。元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从左边起始线开始(justify-content:flex-start)。元素从主轴的起始线开始。
默认不拉伸(flex-grow:0)，但是会压缩(flex-shrink:1)不换行(flew-wrap:nowrap)。元素不会在主维度方向拉伸，但是可以缩小。
不设置高度时flex元素充满flex容器(align-items:stretch)。元素被拉伸来填充交叉轴大小。

---------------------------------------------------------------------------------------

flex容器属性:

1、flex-direction设置flex容器主轴的方向，属性值详解如下：

row // (默认)默认方向

row-reverse //默认方向首尾互换

column //垂直，从上到下

column-reverse //垂直从下到上

2、flex-wrap 控制flex容器是单线还是多线，以及新线的堆叠方向，属性值详解如下：

nowrap //单行

wrap //多行

wrap-reverse // 新线上前排列

3、flex-flow: flex-direction flex-wrap;

4、justify-content 项目在主轴上的对齐方式，属性值详解如下：

flex-start //(默认) 主轴起始端(main-start)齐平

flex-end // 主轴末端(main-end)齐平

center //居中

space-between // 两端对齐，没两个flex元素之间的空隙相等

space-around // 每个项目两侧的距离相等

5、align-items 项目在交叉轴上的对齐方式，属性值详解如下：

flex-start // 交叉轴起始段(cross-start)齐平

flex-end // 交叉轴末端(cross-end)齐平

center // 居中对齐

baseline //flex元素的第一行文字为基准对齐

stretch //flex元素未设置高度时，高度充满flex容器高度

6、align-content 多线的对齐方式，单线不起作用。属性值详解如下：

flex-start //所有flex子元素交叉轴起始段(cross-start)齐平

flex-end //所有flex子元素交叉轴末端(cross-end)齐平

center //所有flex子元素居中对齐

stretch //未设置高度时占满整个交叉轴。默认值

space-between //交叉轴(cross)两端对齐

space-around //每跟轴两侧空隙相等

flex元素属性

1、flex-basis: length; //定义该元素的main-size。

2、flex-grow: number; //拉伸比例，默认值为0

3、flex-shrink: number; //压缩比例，默认值为1

4、flex: flex-grow flex-shrink flex-basis //默认值 0 1 auto

5、align-self单个项目在cross轴上的对齐方式，属性值详解如下：

flex-start //cross-start齐平

flex-end //cross-end齐平

center //居中

baseline //第一行文字

stretch //为设置高度时该元素高度为flex容器高度

6、order：number; //该项目排列的位置值从小到大排列

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
</head>
<style>
 .contain{
 display: flex;
 width: 600px;
 height: 300px;
 border: 1px solid black;
 flex-direction: row;/* 水平方向 */
 /* flex-direction: column-reverse; */
 /* 垂直方向 */
 /* flex-wrap: wrap; */
 /* 修改默认换行 */
 /* justify-content: center; */
 /* 主轴上的对齐方式 */
 /* align-items: center; */
 /* align-content: flex-start; */
    }
 .item{
 width: 100px;
 height: 100px;
 line-height: 100px;
 text-align: center;
 /* line-height: 200px; */
    }
 .item:first-child{
 background-color: #FF7F50;
 flex-grow: 1;
    }
 .item:nth-child(2){
 background-color: #E9967A;
 /* align-self: center; */
 flex-grow: 1;
    }
 .item:last-child{
 background-color: #FFD700;
 flex-grow: 1;
    }
</style>
<body>
 <!--flex容器-->
    <div class="contain">
 <!--flex元素-->
        <div class="item">壹</div>
        <div class="item">贰</div>
        <div class="item">叁</div>
    </div>
</body>
</html>