flex布局学习笔记

最新推荐文章于 2024-02-21 11:18:36 发布

Miruna

最新推荐文章于 2024-02-21 11:18:36 发布

阅读量1.2w

点赞数 2

分类专栏：前端学习文章标签： css html5 html

本文链接：https://blog.csdn.net/Ma_jiao/article/details/119080203

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Flex布局是？

Flexible Box的缩写，意为“弹性布局”，任何容器都可以使用flex布局。
**注意：**设置flex布局后，子元素float、clear、和vertical-align属性会失效。

使用flex布局的元素就是“flex容器”，它所有的子元素称为“项目”。
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。主轴不一定是水平的，交叉轴也不一定是垂直的。

容器属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .box{
            display: flex;
            flex-wrap: nowrap;
            height: 200px;
            width: 200px;
            background: gold;
        }
        .item{
            width: 100px;
            height: 100px;
        }
        .box div:nth-child(1){
            background: #2aabd2;
        }
        .box div:nth-child(2){
            background: #3e8f3e;
        }
        .box div:nth-child(3){
            background: #8a6d3b;
        }
        .box div:nth-child(4){ 
            background: #dddddd;
        }

    </style>
</head>
<body>
    <div class="box">
	       <div class="item">1</div>
	        <div class="item">2</div>
	        <div class="item">3</div>
	        <div class="item">4</div>
    </div>
</body>
</html>

flex-direction

flex-direction决定主轴的方向

row：主轴为水平，起点在端 (默认值)
row-reverse：主轴为水平，起点在右端
column：主轴为垂直，起点在上方。
column-reverse：主轴为垂直，起点在下方

在这里插入图片描述

flex-wrap

flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap：不换行（默认）
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

在这里插入图片描述

flex-flow

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

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

justify-content

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

flex-start：左对齐（默认值）
flex-end：右对齐
center：居中
space-between：两端对齐，两侧没有空隙
space-around：每个项目两侧的间隔相等。
space-evenly：均分

align-items

align-items属性定义项目在交叉轴上如何对齐。

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

align-content

align-content属性定义了多根轴线的对齐方式。只针对多行生效，需要和flex-wrap一起使用

Miruna

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局学习笔记

Flex布局是？      Flexible Box的缩写，意为“弹性布局”，任何容器都可以使用flex布局。      **注意：**设置flex布局后，子元素float、clear、和vertical-align属性会失效。      使用flex布局的元素就是“flex容器”，它所有的子元素称为“项目”。容器默认存
复制链接

扫一扫