flex布局知识点总结

最新推荐文章于 2022-03-31 22:12:30 发布

藏剑于袖

最新推荐文章于 2022-03-31 22:12:30 发布

阅读量387

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/yangpengze/article/details/122379446

版权

在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局

.box{
  display: flex;
}

行内元素也可以使用flex布局

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

序号	简记	术语
1	二成员	容器和项目(`container / item`)
2	二跟轴	主轴与交叉轴(`main-axis / cross-axis`)
3	二根线	起始线(main/cross-start)与结束线（`main/cross-end`)

这个图很重要

容器 container 的属性

外面的大容器的属性的设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

1.flex-direction 主轴方向

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

效果演示

flex-wrap 主轴一行满了换行

nowrap (默认值) 不换行压缩宽度
wrap    换行
wrap-reverses 反向换行

在这里插入图片描述

3. flex-flow 1和2的组合

flex-low: [flex-direction] [flex-wrap]

就是 1 和 2 的组合，简写，同上，这里不赘述.

4.justify-content 主轴元素对齐方式

这里是元素的对齐，区别于刚刚的「方向」
在这里插入图片描述

5.align-items item「项目」在交叉轴上对齐方式「单轴」

这个是 container 容器的属性，设置的是 items 项目元素在交叉轴上对齐样式

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

align-content 交叉轴行对齐方式多行

这个和 justify-content 属性一模一样，

flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end   （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center     (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around  (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch      (每一行)伸缩，占满整个高度

在这里插入图片描述

order 排序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
}

.item{
    width: 200px;
    height: 200px;
    order: 0;
}
.item1{
    order: 3;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

藏剑于袖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局知识点总结

在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{ display: flex;}行内元素也可以使用flex布局.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注意：设为
复制链接

扫一扫