CSS-Flex布局

最新推荐文章于 2024-03-22 15:22:31 发布

Youth009

最新推荐文章于 2024-03-22 15:22:31 发布

阅读量512

点赞数 1

分类专栏：前端文章标签：开发语言 css3 js

本文链接：https://blog.csdn.net/qq_53300975/article/details/124449360

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

Flex布局

容器（Flex Container)
在这里插入图片描述

元素项（Flex Item)

水平轴，横轴，主轴（main axis)

垂直轴，纵轴，交叉轴（cross axis)

Flex容器（Flex Container属性)

1.flex-direction—容器内元素的排列方向

row(默认值)：主轴为水平方向，从左到右
row-reverse:主轴为水平方向，从右到左
column:主轴为垂直方向，从上到下
column-reverse:主轴为垂直方向，从下到上

2.flex-wrap—容器内元素的换行行为

nowrap(默认)：不换行
wrap:换行，首行在上方
wrap-reverse:换行，首行在底部

3.flex-flow—direction和wrap的复合属性

flex-flow:<'flex-direction'>||<'flex-wrap'>
默认值为row nowrap

4.justify-content—元素在横轴上的对齐方式

flex-start(默认值)：左对齐
flex-end:居中对齐
center:居中对齐
space-between:两端对齐，item之间的间隔相等
space-around:每个item两侧的间隔相等

5.align-items—元素在纵轴上的对齐方式

stretch(默认值)：占满整个容器的高度
flex-start:与纵轴起点对齐
flex-end:与纵轴终点对齐
center:与纵轴中间对齐
baseline:与基线对齐

6.align-content—多行元素的对齐方向

stretch(默认值)：占满整个容器的高度
flex-start:与纵轴起点对齐
flex-end:与纵轴终点对齐
center:与纵轴中间对齐
space-between:与纵轴两端对齐，item之间的间隔平均分布
space-around:每根轴线两侧的间隔相等

元素项（Flex Item)属性

1.order—排序规则，越小越靠前排列

默认值为0
数值越小，排列越靠前

2.flex-grow—放大（撑开）比例

0（默认值）：如果存在剩余空间，也不放大
1：如果存在剩余空间，均分剩余空间
既有0，也有1：如果存在剩余空间，0的不撑大，1撑大>=1:如果存在剩余空间，按比例分配剩余空间

3.flex-shirk—收缩比例

1（默认）：如果空间不足，该item将缩小

4.flex-basis—水平方向的大小

如果所有子元素的基准值之和大于剩余空间，则会根据每项设置基准值，按比例伸缩剩余空间
auto(默认值)：无特定宽度指，取决于其它属性值
<length>:用长度值来定义宽度，不允许负值
<precenttage>用百分比来定义宽度，不允许负值
content:基于内容自动计算宽度

5.flex-grow：shirk、basis的复合属性

1：则其计算值为 1 1 0%
auto:则其计算值为1 1 auto
none:则其计算值为0 0 auto
0 auto:则其计算值为0 1 auto

6.align-self—元素在纵轴上的对齐方式

auto(默认值)：父元素的'align-items'值，若无，则为'stretch'
stretch:占满整个容器的高度
flex-start:与纵轴起点对齐
flex-end:与纵轴终点对齐
center:与纵轴中间对齐
baseline:与基线对齐

<!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>flex布局</title>
    <style type="text/css">
        .container{
            width:600px;
            height:600px;
            margin:0 auto;/*水平居中*/
            background-color:beige;
            display:flex;
            /*元素的排列方式*/
            flex-direction:row; 
            /*是否换行*/
            /* flex-wrap: wrap; */
            /*水平居中对齐*/
            /* justify-content:center; */
            /* flex-direction:column-reverse; */
            /* display:inline-flex */
        }
        .container div{
            /* width:250px; */
            width:100px;
            height:100px;
            /* flex-grow:0; */
        }
        .first{
            order:2;
            background:#f00;
        }
        .second{
            order:1;
            background:#ff0;
            flex-grow: 1;
        }
        .third{
            order:3;
            background:#00f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="first">1</div>
        <div class="second">2</div>
        <div class="third">3</div>
    </div>
</body>
</html>

Youth009

关注

1
点赞
踩
0

收藏

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

Flex布局容器（Flex Container)元素项（Flex Item)水平轴，横轴，主轴（main axis)垂直轴，纵轴，交叉轴（cross axis)Flex容器（Flex Container属性)1.flex-direction—容器内元素的排列方向row(默认值)：主轴为水平方向，从左到右row-reverse:主轴为水平方向，从右到左column:主轴为垂直方向，从上到下column-reverse:主轴为垂直方向，从下到上2.flex-wrap—容器内元素的换行行
复制链接

扫一扫