CSS3—flex弹性布局（上）

最新推荐文章于 2024-08-24 21:32:07 发布

仙鹤__

最新推荐文章于 2024-08-24 21:32:07 发布

阅读量61

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130040489

版权

1.1. flex弹性布局-容器属性

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

弹性容器的子元素和父元素之间一定是父子，不能祖先！

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性容器构成：

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

注意：这几个名词是一个意思容器成员 === 弹性项目 === 项目 === 弹性子元素

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。margin外边距和padding内边距正常使用。

.box{          
    display: flex;     
} 
Webkit内核的浏览器，必须加上-webkit-前缀。     
.box{           
    display: -webkit-flex; /* Safari */           
    display: flex;     
} 
 
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

以下6个属性设置在容器上：

flex-direction

flex-wrap

flex-flow

jusitify-content

align-items

align-content

1.1.1弹性容器的主轴

你一旦将一个元素设置为弹性容器之后，这个元素身上有一个主轴，方向为水平方向的一个主轴

flex-direction属性决定主轴的方向（即项目的排列方向）。

语法：

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它可能有4个值。

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

预览：

row（默认）

row-reverse

column

column-reverse

1.1.2 弹性容器的换行方式

flex-wrap 属性，默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
特别注意：这个属性，是轴线是水平方向，才用使用的特有属性。

语法：

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

预览：

（1）

（2）

（3）

1.1.3 弹性容器的复合属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

语法：

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

预览：

注意：

这样写是错误的写法：

 /* 注意：这种写法不对，因为 这个属性flex-wrap，它是针对 轴线为水平方向上的属性。 */
            flex-flow: column wrap;

因为垂直方向不存在换行，垂直方向，是换列。

1.1.4 项目在主轴上的对齐方式

justify-content属性定义了项目在主轴上的对齐方式。

语法：

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

center预览：

space-between分析：

space-around分析：

1.1.5 项目在交叉轴上的对齐方式

align-items属性定义项目在交叉轴（纵轴|侧轴|垂直轴）上如何对齐。语法：

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

注意：你使用align-items:stretch;的大前提是弹性项目没有高度或者弹性项目的高度是auto。

flex-start预览：

flex-end预览：

center预览：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            border:1px solid blue;
            margin: 20px auto 0;
            display:flex;
            justify-content: space-between;
            align-items: baseline;
        }
        .item{
            width: 200px;
            height: 200px;
            flex:1;
        }
        .item:first-child{
            background-color: pink;

        }
        .item:nth-of-type(2){
            background-color: skyblue;
            font-size: 50px;
        }
        .item:last-child{
            background-color: green;
        }
    </style>
    </style>
</head>
<body>
    <div class="box">
        <span class="item">11111111111</span>
        <span class="item">22222</span>
        <span class="item">333333333</span>
    </div>
</body>
</html>

baseline预览：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 600px;
            height: 600px;
            border:1px solid blue;
            margin: 20px auto 0;
            display:flex;
            justify-content: space-between;
            /* 占满交叉轴 */
            /* 条件1 */
            align-items: stretch;

        }
        .item{
            width: 200px;
            /* 条件2 */
            height: auto;
           
        }
        .item:first-child{
            background-color: pink;

        }
        .item:nth-of-type(2){
            background-color: skyblue;

        }
        .item:last-child{
            background-color: green;
        }
    </style>

stretch预览：

1.1.6 项目在多根轴线的对齐方式

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性项目的对齐，而是设置各个行的对齐。

语法：

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

注意：你使用align-content:stretch;的大前提是弹性项目没有高度或者弹性项目的高度是auto。

flex-start预览：

center预览：

space-between预览：

space-around预览：

仙鹤__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3—flex弹性布局（上）

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
复制链接

扫一扫