flex弹性布局

最新推荐文章于 2024-09-02 20:34:02 发布
最新推荐文章于 2024-09-02 20:34:02 发布
阅读量163 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BearP/article/details/104563490
版权

flex弹性布局(display: flex;)

添加在父容器上

1. display: flex;
2. flex-direction 布局的排列方向

  • flex-direction: row;默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
<style>
        #main ul{
            margin: 100px;
            display: flex;
            list-style: none;
            flex-direction: row;
        }
        #main ul li:nth-of-type(1){ width: 100px; height: 100px; background: blue;}
        #main ul li:nth-of-type(2){ width: 100px; height: 100px; background: red;}
        #main ul li:nth-of-type(3){ width: 100px; height: 100px; background: yellow;}
        #main ul li:nth-of-type(4){ width: 100px; height: 100px; background: pink;}
        #main ul li:nth-of-type(5){ width: 100px; height: 100px; background: green;}
        #main ul li:nth-of-type(6){ width: 100px; height: 100px; background: gray;}
        #main ul li:nth-of-type(7){ width: 100px; height: 100px; background: orange;}
        #main ul li:nth-of-type(8){ width: 100px; height: 100px; background: orangered;}
    </style>

在这里插入图片描述

  • flex-direction: row-reverse;显示为行。但方向和row属性值是反的
#main ul{
            display: flex;
            list-style: none;
            flex-direction: row-reverse;
        }

在这里插入图片描述

  • flex-direction: column;显示为列
#main ul{
            display: flex;
            list-style: none;
            flex-direction: column;
        }

在这里插入图片描述

  • flex-direction: column-reverse; 显示为列。但方向和column属性值是反的
#main ul{
            display: flex;
            list-style: none;
            flex-direction: column-reverse;
        }

在这里插入图片描述
3.flex-wrap 是否进行换行处理.

  • flex-wrap: nowrap;默认值，不换行处理
#main ul{
            width: 500px;
            display: flex;
            list-style: none;
            flex-wrap: nowrap;
        }

在这里插入图片描述

  • flex-wrap: wrap;换行处理
#main ul{
            width: 500px;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
        }

在这里插入图片描述

  • wrap-reverse; 反向换行
#main ul{
            width: 500px;
            display: flex;
            list-style: none;
            flex-wrap: wrap-reverse;
        }

在这里插入图片描述
4.justify-content 主轴方向上子项的对齐和分布方式

  • justify-content: flex-start; 子项都去起始位置对齐
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: flex-start;
        }

在这里插入图片描述

  • justify-content: flex-end; 子项都去结束位置对齐。
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: flex-end;
        }

在这里插入图片描述

  • justify-content: center; 子项都去中心位置对齐
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: center;
        }

在这里插入图片描述

  • justify-content: space-between; 两端对齐。
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: space-between;
        }

在这里插入图片描述

  • justify-content: space-around;around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: space-around;
        }

在这里插入图片描述

  • justify-content: space-evenly; evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            justify-content: space-evenly;
        }

在这里插入图片描述
5.align-items 每一行中的子元素上下对齐方式

  • align-items: flex-start; 起始位置对齐
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            align-items: flex-start;
        }

在这里插入图片描述

  • align-items: center; 中心对齐
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            align-items: center;
        }

在这里插入图片描述

  • align-items: flex-end; 结束位置对齐
#main ul{
            width: 1000px;
            height: 200px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            align-items: flex-end;
        }

在这里插入图片描述
5.align-content 属性定义了在交叉轴方向的对齐方式及额外空间分配(侧轴的对齐方式）。一行看不出效果

  • align-content: flex-start; 从起始线开始排列
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: flex-start;
        }

在这里插入图片描述

  • align-content: flex-end; 从终点线开始排列
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: flex-end;
        }

在这里插入图片描述

  • align-content:center; 居中排列
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: center;
        }

在这里插入图片描述

  • align-content: space-around; 边缘两侧的空白只有中间空白宽度一半（相邻项目之间的距离是两个项目之间留白的和）
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: space-around;
        }

在这里插入图片描述

  • align-content:space-between; 项目均匀分布，第一项在启点线，最后一项在终点线
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: space-between;
}

在这里插入图片描述

  • align-content: stretch; 默认值
#main ul{
            width: 500px;
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-items: flex-end;
            align-content: stretch;
        }

在这里插入图片描述

添加在子容器上

1.order 排序: 值从小到大顺序排列，可以为负值，缺省为0。

<style>
        *{padding: 0; margin: 0;}
        #main ul{
            /* width: 500px; */
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        #main ul li:nth-of-type(1){ width: 100px; height: 100px; background: blue; order: 8;}
        #main ul li:nth-of-type(2){ width: 100px; height: 100px; background: red; order: 7;}
        #main ul li:nth-of-type(3){ width: 100px; height: 100px; background: yellow; order: 6;}
        #main ul li:nth-of-type(4){ width: 100px; height: 100px; background: pink; order: 5;}
        #main ul li:nth-of-type(5){ width: 100px; height: 100px; background: green; order: 4;}
        #main ul li:nth-of-type(6){ width: 100px; height: 100px; background: gray; order: 3;}
        #main ul li:nth-of-type(7){ width: 100px; height: 100px; background: orange; order: 2;}
        #main ul li:nth-of-type(8){ width: 100px; height: 100px; background: orangered; order: 1;}
    </style>
 <body>
    <div id="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

在这里插入图片描述
2.flex-grow 扩展

  • flex-grow: 0;默认值，不扩展
  • flex-grow: 1; 扩展，会把空白区全部占满
#main ul li{
            flex-grow: 0;
        }
#main ul li{
            flex-grow: 1;
        }

在这里插入图片描述在这里插入图片描述
2.flex-shrink 收缩
正常默认值是1
0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

#main ul li{
           flex-shrink: 1;
       }
       #main ul li{
           flex-shrink: .5;
       }

在这里插入图片描述
3.flex-basis (跟flex-shrink/flex-grow很像)。
flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。

#main ul li{
           flex-basis: auto;
       }
       
#main ul li{
           flex-basis: 60px;
       }

#main ul li{
           flex-basis: 160px;
       }

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
4.align-shef 控制单独某一个子项的对齐方式（和align-items类似)

#main ul{
            height: 400px;
            margin: 100px;
            background: cyan;
            display: flex;
            list-style: none;
        }
#main ul li:nth-of-type(1){ 
	width: 100px; 
	height: 100px; 
	background: blue; 
	align-self: center;
	}

在这里插入图片描述

小熊xl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex弹性布局简介、普通布局与弹性布局实现居中对比、弹性布局优缺点。
Z_RedBright的博客
06-06 1563
Flex弹性布局简介 Flexible Box 简称Flex，是一种比较灵活高效的网页布局方式。 Flex弹性可以应用于任意的HTML元素，行内元素与块级元素使用弹性布局的方式不一样，如下代码段所示。 //块级元素应用 <div class="flexibleBlock"></div> .flexibleBlock { display: flex; } //行内元素应用 <p class="flexibleInline"></p> .fl
flex 弹性布局
thothsun 的博客
12-12 994
flex 弹性布局 上一节介绍了小程序中常用的组件，在使用它们的时候，如何控制它们的位置呢？就需要用到布局了。传统的布局实现方式比较麻烦，要用多个属性配合实现。后来 flex 弹性布局出现后，用其他方式实现的布局，用 flex 布局都能更简洁地实现。本节通过几个简单的例子介绍 flex 布局的基本用法。 首先新建一个空白页面，在一个 view 里面放三个 text。在 view 的样式中添加 display:flex 将 view 设置为弹性布局，组件默认是按照从上到下、从左到右的顺序排列。 <!-
CSS通用样式2——Flex布局
qq_66198247的博客
10-18 2869
使用display通用类d-flex或类创建一个flexbox容器，并将子元素转换为flex属性。其中，d-flex类设置对象为弹性伸缩盒子，d-inline-flex类设置对象为内联块级弹性伸缩盒子。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用Flex布局的元素，称为Flex容器( flexcontainer)，简称"容器"。
flex弹性布局(详解)
msq6678的博客
07-21 3055
Flex弹性盒布局前言布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—— Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、什么是Flex弹性布局？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的。
最详细完整的flex弹性布局
热门推荐
angula
08-12 5万+
初了解 在学习弹性布局之前首先就要明白其概念 flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局 .box{ display: flex; } 行内元素当然也可以使用flex布局 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; }
Flex弹性布局
cx18333的博客
05-19 1611
Flex弹性布局笔记 flex-direction:文本排列方向 row：默认值，水平排列，从左侧开始排序 row-reverse:水平排序，从右侧开始排序 column:垂直排序，从上到下进行排序 column-reverse:垂直排序，从下到上进行排序 flex-wrap：文本是否换行排序 nowrap:默认，不换行 wrap：换行，进行多行排列 wrap-reverse:换行，第一行在最下方 align-content：多行排列时使用对齐，如果只有单行该属性不生效 stretch
flex弹性布局详解
weixin_49115895的博客
01-12 1万+
一、什么是弹性布局 弹性布局(flex container)，页面中任何一个元素只要设置了display:flex属性，那么当前盒子都称为弹性盒子。弹性盒子默认有两条轴: 默认水平显示的主轴 和 始终要垂直于主轴的侧轴(也叫交叉轴)，在弹性盒子中所有的子元素都是沿着主轴方向显示。 与传统布局的区别 传统布局，基于盒模型，依赖 display属性 、position属性 、float属性，它对于那些特殊布局非常不方便。 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好的布局 flex布局 操作方
Flex弹性布局简述
weixin_72110653的博客
08-23 325
Flex弹性布局简述
Flex 弹性布局
imByte的博客
04-08 975
目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，因此这里来介绍一下何为 Flex 弹性布局。 Flex 布局可以为盒状模型提供最大的灵活性，自动弹性伸缩，合适适配不同大小的屏幕。 说明 当父盒子设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。 任何一种元素都可以指定为 flex 布局。 .wrap { display: flex } /* 行
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性布局基本语法（修改版）.pdf
12-01
Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
css的position定位的属性
qq_43235503的博客
08-30 578
css的position定位的属性
CSS学习9[重点]--盒子模型大小、布局稳定性、CSS3盒模型以及盒子阴影
最新发布
qq_54641174的博客
09-02 1584
盒子模型--内容高宽，盒子布局，盒子阴影
CSS 高级区块效果——WEB开发系列25
一条晒干的咸鱼的博客
08-31 1838
CSS提供了多种工具和属性，使我们能够创建视觉上引人注目的效果。今天我们继续将深入了解几种高级CSS效果：盒子阴影、滤镜、混合模式和文本背景裁剪，提升网页设计的质感和深度。
DOM树和CSS树解读
2301_79858914的博客
09-01 1167
DOM树是浏览器解析HTML文档后生成的树形结构。它将HTML文档的内容表示为一个节点树，每个节点代表文档中的一部分，例如标签、属性或文本。CSS树是浏览器解析CSS样式表后生成的对象模型树。它表示文档中的所有样式规则及其对应的元素和属性。DOM树和CSS树是浏览器渲染网页的基础。DOM树表示文档的结构和内容，CSS树表示样式和样式规则。两者结合生成渲染树，最终决定页面的显示效果。理解这两个数据结构有助于开发者更好地进行网页性能优化。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 1156
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
Flex弹性布局详解与用法
"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值