一文讲清楚Flex布局的主要属性

最新推荐文章于 2024-07-25 15:29:26 发布
最新推荐文章于 2024-07-25 15:29:26 发布
阅读量2.9k 收藏 20
点赞数 2
文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56409077/article/details/130775191
版权

目录

一、Flex布局是什么

二、基本概念

三、容器的属性

3.1 flex-wrap 属性

3.2 flex-flow 属性

3.3 justify-content属性

3.4 align-items属性

3.5 align-content属性

四、项目的属性

4.1 order属性

4.2 flex-grow属性

4.2.1 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

4.2.2 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

4.3.1 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4.3.2 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

4.4 flex-basis属性

4.4.1 当值为 content时，你实际上设置了弹性元素的初始主尺寸为基于其内容的自动调整大小。

4.4.2 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

4.5.1 属性简写介绍

4.5.2 属性简写的规则

4.6 align-self属性

一、Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

二、基本概念

容器默认存在两根轴：

  • 水平的主轴（main axis）和垂直的交叉轴（cross axis）。
  • 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
  • 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-wrap 属性

flex-wrap 属性主要处理在一条轴线上排不下项目元素如何换行的问题：

  • flex-wrap: nowrap;默认值为nowrap，不换行

  • flex-wrap: wrap;换行，第一行在上方，不颠倒顺序

  • flex-wrap: wrap-reverse;换行，但第一行在下方，颠倒了顺序

3.2 flex-flow 属性

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

  • felx-direction: row | row-reverse | column | column-reverse; 决定主轴的方向
  • flex-wrap: nowrap | wrap | wrap-reverse; 决定是否换行，换行后 排序的问题

3.3 justify-content属性

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

  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • justify-content：space-around 项目之间的间隔距离 比项目与容器边框之间的距离大两倍（如图）

  • justify-content：space-between; 两端对齐，项目之间的间隔都相等。

3.4 align-items属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-items: baseline; 项目的第一行文字的基线对齐。

  • align-items: stretch; （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.5 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  • stretch（默认值）：轴线占满整个交叉轴。

四、项目的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

4.2 flex-grow属性

4.2.1 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

注意黄3 和 紫7 的变化

4.2.2 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

注意蓝色盒子的变化

4.3 flex-shrink属性

负值对该属性无效。

4.3.1 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4.3.2 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

紫色的值为0，其他为默认1；

4.4 flex-basis属性

4.4.1 当值为 content时，你实际上设置了弹性元素的初始主尺寸为基于其内容的自动调整大小。

4.4.2 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

4.5.1 属性简写介绍

flex是一个简写属性，用于设置弹性盒子中弹性元素的伸缩性。它是以下三个CSS属性的简写：默认值为0 1 auto

  • flex-grow：定义了弹性元素的放大比例。
  • flex-shrink：定义了弹性元素的缩小比例。
  • flex-basis：定义了弹性元素的初始主尺寸。

4.5.2 属性简写的规则

你可以使用一个、两个或三个值来指定flex属性。例如：

  • flex: 1;：只设置了flex-grow属性，它定义了弹性元素的放大比例为1。
  • flex: 1 30px;：设置了flex-grow和flex-basis属性，它定义了弹性元素的放大比例为1，初始主尺寸为30像素。
  • flex: 2 2 10%;：设置了flex-grow、flex-shrink和flex-basis属性，它定义了弹性元素的放大比例为2，缩小比例为2，初始主尺寸为容器主尺寸的10%。

4.6 align-self属性

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

  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

  • 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
冲向前端开发
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
一文说白 CSS 弹性布局 Flexible Box
MoTec的博客
01-05 505
CSS 弹性布局
Flutter 必须知道的布局规则
会煮咖啡的猫咪
10-28 1072
Flutter 必须知道的布局规则 很多人说布局不熟练，我建议是先去了解布局规则，我之前的文章有讲过。 今天看到一文写的很好，我做了翻译，时间关系没有润色太多，然后我也准备了视频做了解说，希望能帮到你。 原文 https://rohanjariwala03.medium.com/flutter-the-advanced-layout-rule-even-beginners-must-know-87eebb54cef6 前言 当学习 Flutter 的人问你为什么某个 widget 有宽度: 100 不
一文让你学会flex布局关于主轴 、侧轴的布局方式
m0_73920697的博客
10-21 2976
弹性盒子没有固定大小，弹性盒子就是内容大小，添加stretch取值会被拉伸 */space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间。space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧。space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等。/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压。在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子。弹性盒子有固定的大小，盒子该多大，就是多大。
flex属性中的flex-grow、flex-shrink、flex-basis
卿本无忧的博客
06-26 915
flex属性中的flex-grow、flex-shrink、flex-basis
一文讲透如何使用CSS美化HTML界面
最新发布
2301_79959126的博客
07-25 655
本文具体详细地介绍了如何使用CSS样式表语言去美化我们的HTML网页，介绍了CSS样式表语言中的基本概念，如规则集、选择器等，手把手地讲解了如何使用CSS样式表进行HTML的美化操作，并在最后进行了一个实战练习帮助巩固CSS样式表语言相关知识。
CSS Grid布局这样玩
热门推荐
程序猿开发日志【学习永无止境】
04-25 1万+
自从去年年半年开始，CSS Grid布局的相关教程在互联网上就铺天盖地，可谓是声势浩大。就针对于Web布局而言，个人认为Grid布局将是Web布局的神器，它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式，而Grid最大的特色，采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。 就我个人而言，我也一直在不断的关注这个布局利器的相
布局
sinat_38992528的博客
04-18 540
关于本文作者：@蔡剑涛原文：https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA前言在刚刚过去的第四届CSS大会上，不少人提到了布局的问题。那么这篇很适合重温一下。今日早读文章由@蔡剑涛投稿分享。@蔡剑涛,来自海致星图前端团队,专注前端项目架构设计、组件库开发、开发流程精进和团队技术体系建设正文从这开始～背景前端圈有个“梗”：在面试时，问个css的po...
前端布局基础概述
weixin_30602505的博客
07-05 201
https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA 前端布局基础概述 原创：蔡剑涛IT一大道至简3月20日 1.前言 前端圈有个“梗”：在面试时，问个css的position属性能刷掉一半人，其中不乏工作四五年的同学。在公司一直有参与前端的基础面试，深感这个“梗”不是个玩笑。 然而，我觉得实际比例可能会更高...
一文搞定移动端适配！
weixin_38984030的博客
05-22 322
手机市场日渐丰富的同时，给我们前端开发人员带来的 “网页内容自适应屏幕尺寸进行显示的问题” 也日渐凸显出来，接下来我们就要细说移动端适配的前世今生及方案。 为什么要移动端适配？ 一般情况下设计稿的设计师按照 375 的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时 375 的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容..
CSS颜色基本样式，一文说清！
m0_57081438的博客
06-08 153
思维导图 第一章 HTML（★★） 1.浏览器页面有哪三层构成，分别是什么，作用是什么? 2.HTML5的优点与缺点？ 3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 4.HTML5有哪些新特性、移除了哪些元素？ 5.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么? 6.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 7.说说你对HTML5认识?（是什么,为什么） 8.对WEB标准以及W3C的理解与认识?. 9.HTML5行内元素有哪些,块级
一文讲清楚ChatGPT的坑
05-12
一文讲清楚ChatGPT的坑
一文了解如何通过元件布局控制 EMI
01-12
在本文中，小编将为大家介绍如何通过元件布局的把控来对EMI进行控制。 　在设计好电路结构和器件位置后，PCB的EMI把控对于整体设计就变得异常重要。 　元器件布局实践证明，即使电路原理图设计正确，印制电路板...
一文搞清楚开关电源设计损耗问题
01-12
　功率开关是典型的开关电源内部主要的两个损耗源之一。损耗基本上可分为两部分：导通损耗和开关损耗。导通损耗是当功率器件已被开通，且驱动和开关波形已经稳定以后，功率开关处于导通状态时的损耗；开关损耗是出现...
一文汇总 CSS 两列布局和三列布局的具体使用
01-19
但是，基础的 CSS 依然需要我们熟练掌握，今天就来总结写下 CSS 布局的方式。 两列布局 左列定宽，右列自适应 float + margin 布局 html 代码 <body> 左列定宽 右列自适应 </body> css 代码： #...
一文看懂lcr测试仪测试原理及主要功能
01-20
lcr测试仪测量原理　Vx与Vr均是矢量电压表，Rr是理想电阻。自平衡电桥的意思是：当DUT（DeviceUnderTest）接入电路时，放大器的负反馈配置自动使得OP输入端虚地。Vx准确测定DUT两端电压（DUT的Low电位是0），Vr与Rr...
CSS：mix-blend-mode属性（设置元素的混合模式）
m0_65029152的博客
07-24 944
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 454
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1255
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
一文讲清楚MCU工作原理
05-29
2. 存储器：单片机中的存储器主要分为程序存储器和数据存储器两种。程序存储器用于存储程序代码，通常是闪存或EEPROM；数据存储器用于存储程序中使用的变量和中间结果，通常是SRAM。 3. 外设：单片机中的外设包括...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值