flex弹性布局

巨人张

于 2022-05-07 21:38:44 发布

阅读量254

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_46403734/article/details/117510958

版权

一、Flex布局原理

原理: 给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局

二、flex布局父项常见属性

2.1 以下6个属性是对父元素进行设置的：

flex-direction: 设置主轴的方向
justify-content：设置主轴的子元素排列方式
flex-wrap：设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items: 设置侧轴上的子元素排列方式（单行）
flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

2.2 flex-direction 设置主轴的方向
在这里插入图片描述

2.3 justify-content：设置主轴的子元素排列方式

2.4 flex-wrap：设置子元素是否换行

2.5 align-items: 设置侧轴上的子元素排列方式（单行）

2.6 align-content: 设置侧轴上的子元素的排列方式（多行）
在这里插入图片描述
2.7 flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow: row wrap;

三、flex布局子项常见属性

3.1 flex属性

flex属性用来定义子元素分配剩余空间，表示占多少份数。

 div span {
   flex: 1;
 }

3.2 align-self 控制子项自己在侧轴上的排列方式

align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 div span:nth-child(3) {
   /* 设置自己在侧轴上的排列方式 */
   align-self: flex-end;
 }

3.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认值为0.
注意：与z-index不一样。

 div span:nth-child(2) {
   order: -1;
 }

附课件代码：

<!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>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aqua;
            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */
            /* justify-content: space-between; */
            /* flex-wrap: wrap; */
            /* align-items: center; */
            /* align-items: flex-end; */
            /* align-items: stretch-->需要把子元素高度设置为0 */
            /* align-items: stretch; */
            /* align-content: space-between; */
            /* flex-flow: row wrap; */
        }

        div span {
            width: 150px;
            height: 100px;
            color: #fff;
            margin: 10px;
            background-color: pink;
            /* flex: 1; */
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <!-- <span>4</span>
      <span>5</span>
      <span>6</span> -->
    </div>
</body>

</html>

巨人张

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flex弹性布局

一、Flex布局原理原理: 给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局二、flex布局父项常见属性2.1 以下6个属性是对父元素进行设置的：flex-direction: 设置主轴的方向justify-content：设置主轴的子元素排列方式flex-wrap：设置子元素是否换
复制链接

扫一扫