Flex布局容器的属性详解

已于 2022-07-01 23:13:44 修改
阅读量298 收藏 1
点赞数
分类专栏： HTML+CSS学习过程笔记 文章标签： css html css3 前端 html5
于 2022-06-30 12:44:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53985958/article/details/125528719
版权

Flex：Flexible Box的缩写，意为”弹性布局”
开启Flex布局的标志：在父容器上定义 display:flex;

示例

实现代码：

<div class="box">
    <div class="box1">one</div>
 	<div class="box2">two</div>
 	<div class="box3">three</div>
</div>	

.box{
 	width: 500px;
 	height: 400px;
 	/*开启flex布局的标志*/
 	display: flex;
 	background-color: lightgray;
 	border: 1px solid #000;
}
.box1,.box2,.box3{
 	width: 100px;
 	height: 100px;
 	color: darkred;
 	font-size: 30px;
 	text-align: center;
 	line-height: 100px;
}
.box1{
 	background-color: bisque;
}
.box2{
 	background-color: chocolate;
}
.box3{
 	background-color: cornflowerblue;
}

原始效果图：

在这里插入图片描述

主要介绍内容

定义在父容器上的属性：决定子元素整体的排列方式

父容器上的属性：在flex布局中是一个一维(只有一根主轴)的布局方式，即只能处理一个维度上的布局(只能处理一行或一列)

在这里插入图片描述

属性小目录：[点击可跳转到相应详细位置]

  1. 决定主轴方向：flex-direction
  2. 是否换行: flex-wrap
  3. 决定主轴方向的排列方式： justify-content
  4. 垂直轴/交叉轴的排列方向: align-items
  5. 决定多条主轴的对齐方式：align-content

  • 开启布局方式：display:flex;

  • 决定主轴方向：flex-direction

    • flex-direction: row; (默认)：水平方向，start => end

      .box{
   ... ...
   display: flex;
   flex-direction: row;
   ... ...
}

      效果图：

      在这里插入图片描述

    • flex-direction: row-reverse; ：水平反向，end => start

      .box{
   ... ...
   display: flex;
   flex-direction: row-reverse;
   ... ...
}

      效果图：

      在这里插入图片描述

    • flex-direction: column; ：垂直方向，start => end

      .box{
   ... ...
   display: flex;
   flex-direction: column;
   ... ...
}

      效果图：

      在这里插入图片描述

    • flex-direction: column-reverse; ：垂直反向，end => start

      .box{
   ... ...
   display: flex;
   flex-direction: column-reverse;
   ... ...
}

      效果图：

      在这里插入图片描述

  • 是否换行: flex-wrap

    <div class="box">
 	<div class="box1">one</div>
 	<div class="box2">two</div>
 	<div class="box3">three</div>
 	<div class="box1">one</div>
 	<div class="box2">two</div>
 	<div class="box3">three</div>
</div>

    • flex-wrap: nowrap;(默认): 不换行，会压缩 ‘div’

      .box{
 	... ...
 	display: flex;
 	flex-wrap: nowrap;
 	... ...
}

      效果图：

      在这里插入图片描述

    • flex-wrap: wrap; : 换行

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	... ...
 }

      效果图： 中间出现留白部分，如何解决? 见下文部分

      在这里插入图片描述

    • flex-wrap: wrap-reverse; : 反向换行

      .box{
	... ...
	display: flex;
	flex-wrap: wrap-reverse;
	... ...
 }

      效果图：

      在这里插入图片描述

  • 决定主轴方向的排列方式： justify-content

    • justify-content: flex-start;: 以当前起点作为元素的起点

      .box{
	... ...
	display: flex;
	justify-content: flex-start;
	... ...
}

      效果图：

      在这里插入图片描述

    • justify-content: flex-end;: 以end作为元素的起点

      .box{
	... ...
	display: flex;
	justify-content: flex-end;
	... ...
}

      效果图：

      在这里插入图片描述

    • justify-content: center;: 排列在中心的位置

      .box{
	... ...
	display: flex;
	justify-content: center;
	... ...
}

      效果图：

      在这里插入图片描述

    • justify-content: space-between;: 两边对齐

      .box{
	... ...
	display: flex;
	justify-content: space-between;
	... ...
}

      效果图：

      在这里插入图片描述

    • justify-content: space-around;: 等距对齐(每一个盒子的间距都相等)

      .box{
	... ...
	display: flex;
	justify-content: space-around;
	... ...
}

      效果图：

      在这里插入图片描述

    注意：

    如果主轴方向改变(变为垂直)，那么改变的是垂直方向的排列顺序

    例如：

    .box{
	... ...
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	... ...
}

    效果图：

    在这里插入图片描述

    上述其他属性同理…


    - 垂直轴/交叉轴的排列方向: align-items

    • align-items: flex-start;

      .box{
	... ...
	display: flex;
	align-items: flex-start;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-items: flex-end;

      .box{
	... ...
	display: flex;
	align-items: flex-end;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-items: center;

      .box{
	... ...
	display: flex;
	align-items: center;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-items: baseline; : 基线(以文字基准线对齐)

      上面初始设置子盒子div: line-height:100px;

      修改并设置三个盒子不同的line-height值：

      .box1,.box2,.box3{
  width: 100px;
  height: 100px;
  color: darkred;
  font-size: 30px;
  text-align: center;
  /* line-height: 100px; */
}
.box1{
  background-color: bisque;
  line-height: 100px;
}
.box2{
  background-color: chocolate;
  line-height: 80px;
}
.box3{
  background-color: cornflowerblue;
  line-height: 60px;
}

      效果图：

      在这里插入图片描述

      接下来，设置以文字基线对齐：

      .box{
	... ...
	display: flex;
	align-items: baseline;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-items: stretch;: 延展，只有在当前高度没有定义的情况下才会延展

      .box{
	... ...
	display: flex;
	align-items: stretch;
	... ...
}
.box1,.box2,.box3{
	width: 100px;
	/* height: 100px; */
	color: darkred;
	font-size: 30px;
	text-align: center;
	/* line-height: 100px; */
}

      效果图：

      在这里插入图片描述

  • 决定多条主轴的对齐方式：align-content

    只有一根主轴：

    在这里插入图片描述

    多根主轴：
    在这里插入图片描述

    解决换行留白问题：

    通过调整align-content来调整多根主轴的对齐方式

    • align-content: flex-start;: 多根主轴按向上靠近(flex-start)方式来排列

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-content: flex-end;: 多根主轴按向下靠近(flex-end)方式来排列

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: flex-end;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-content: center;: 多根主轴按向中间靠近(center)方式来排列

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-content: space-between;: 多根主轴按向两端靠近(space-between)方式来排列

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-content: space-around;: 多根主轴按向两端等距靠近(space-around)方式来排列

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	... ...
}

      效果图：

      在这里插入图片描述

    • align-content: stretch;: 由当前的内容高度(line-height)来决定

      .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	... ...
}
.box1,.box2,.box3{
	... ...
	line-height: 100px;
}

      效果图：

      在这里插入图片描述

      调整子盒子line-height的高度：

      • 如果没有属性：align-content: stretch;

        .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	/*align-content: stretch;*/
	... ...
}
.box1,.box2,.box3{
	... ...
	/*line-height: 100px;*/
}
.box1{
	background-color: bisque;
	line-height: 100px;
}
.box2{
	background-color: chocolate;
	line-height: 80px;
}
.box3{
	background-color: cornflowerblue;
	line-height: 60px;
}

        效果图：

        在这里插入图片描述

      • 添加属性：align-content: stretch; 并 关闭高度

        .box{
	... ...
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: stretch;
	... ...
}
.box1,.box2,.box3{
	... ...
	/* height: 100px; */
	/*line-height: 100px;*/
}
.box1{
	background-color: bisque;
	line-height: 100px;
}
.box2{
	background-color: chocolate;
	line-height: 80px;
}
.box3{
	background-color: cornflowerblue;
	line-height: 60px;
}

        效果图：

        在这里插入图片描述

        注意：

        要设置排列对齐方式：align-items: flex-start | flex-end | center; 否则，不起效果

潇xiao雨未歇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...
flex属性详情
july_29的博客
02-23 181
flex基本概念 给主盒子设置display：flex；属性以后，该盒子就会变成一个flex容器，容器里面的内容成为flex元素。 未设置flex： <div class="container"> <div class="item">12</div> <div class="item">34</div> <div class="item">56</div>
Flex布局实现n等分且带间距
m0_52364694的博客
11-27 1064
<!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>Doc
html div flex,CSS中flex布局详解
weixin_31885875的博客
06-16 2596
1.浏览器flex兼容申明dispaly:flex;display:-webkit-flex;display:-ms-flex;display:-moz-flex;display:-o-flex;运用flex.min.css，可以让移动端主流浏览器兼容flex，适用于(jquery/zepto/angular框架)运用data-flex.min.css，可以让移动端主流浏览器兼容flex，适用于(...
关于绝对居中和div并列——flex属性
weixin_33843947的博客
06-20 315
2019独角兽企业重金招聘Python工程师标准>>> ...
flex布局的常见属性
wind的博客
05-17 430
父项属性 flex-direction flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。 flex-direction 的取值： 举例说明： <div> <span>1</span> <span>2</span> <span>3</span> </div> ①父元素不设置flex-direction时，默认水平方向为主轴，元素从左向右排列
详解flex布局的元素如何分配容器的剩余空间
01-19
不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、position、甚至是 table 等。而使用这些属性来实现各种布局效果，往往又会遇到相当...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
flex.md flex属性详解文档
04-14
flex原理和全属性详解flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
超详细的flex的常用属性、属性值！！
weixin_52350720的博客
09-17 1862
9.17学习
css sprites如何使用
最新发布
codedadi的博客
05-18 391
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 319
TailwindCSS在vite项目中的安装与使用
CSS碎碎念
◝(⑅•ᴗ•⑅)◜..°♡的博客
05-17 273
碎碎念
css去除复选框默认样式
xiaohua0708day的博客
05-17 121
类的样式，包括边框、宽度、高度等。在选中和未选中状态下，我们分别定义了不同的背景颜色，以便在复选框被选中或取消选中时改变其外观。的支持可能有所不同。你可能需要根据实际情况进行调整，以确保在各种浏览器下都能正确显示自定义的复选框样式。属性来覆盖默认的复选框外观。这些属性允许你重置浏览器的默认外观，以便你可以自定义样式。需要注意的是，不同浏览器对。在这个例子中，我们使用了。
CSS从入门到精通（CSS学习第一天）
m0_49067926的博客
05-17 762
CSS基础选择器（标签选择器、类选择器、id选择器、通配符选择器）、CSS字体属性、CSS文本属性
CSS【常用CSS样式、盒子模型、定位、浮动 、扩展样式】--学习JavaEE的day46
gangain的博客
05-17 995
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 是为了解决内容与表现分离的问题 • 多个样式定义可层叠为一 • 样式通常存储在样式表中
css实现围绕中心进行圆形旋转
今晚吃火锅的博客
05-14 248
css animation实现围绕圆心旋转动效
HTML的使用（中）
weixin_74141222的博客
05-14 1050
在许多网页平台上浏览，大多逃不了登录账号。此时在网页中填写的用户名文本框与密码文本框，就属于HTML的表单元素。以上就是HTML表单的内容了，表单提供了大量能使浏览器用户快速便捷地填写数据的方法，构建了数据的交互传输。
CSS中flex布局详解
09-07
更进一步的了解Flex布局的使用和属性，你可以参考提供的链接，这些链接提供了详细的指南和案例，帮助你更好地理解和应用Flex布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值