flex布局

flex布局

定义

在这里插入图片描述


// 为其所有直接子级开启弹性上下文

.container { display: flex; /* or inline-flex */ }

在这里插入图片描述

第一部分:container

在这里插入图片描述

1:弹性方向(flex-direction)

在这里插入图片描述
建立主轴,Flexbox是单向布局概念。可以将弹性项目想像为主要以水平行或垂直列布置。


// test

.container { flex-direction: row | row-reverse | column | column-reverse; }

  1. row(默认):从左往右
  2. row-reverse:从右往左
  3. column:从上往下
  4. column-reverse:从下往上
2:柔性包装(flex-wrap)

在这里插入图片描述
默认情况下,所有弹性项目都尝试放入一行,可以使用flex-wrap对其进行更改。


.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

  1. nowrap(默认设置):所有弹性项目都在一行上
  2. wrap:flex项目从上到下包装到多行上
  3. wrap-reverse:flex项目从下到上包装到多行上
3:flex-flow(用于父级flex容器元素)

flex-flow:flex-direction(弹性方向)和flex-wrap(柔性包装)属性的简写。他们共同定义了flex容器的主轴和横轴。默认值为row,nowrap。


flex-flow: <'flex-direction'> || <'flex-wrap'>

4:证明内容(justify-content)

flex-start (默认):将项目打包到flex-direction的开头。
在这里插入图片描述
flex-end :将项目包装在flex方向的末端。
在这里插入图片描述
center :项目沿线居中。
在这里插入图片描述
space-between :项目在行中均匀分布; 第一项位于开始行,最后一项位于结束行。

在这里插入图片描述
space-around :项目在行中均匀分布,周围具有相等的空间。 请注意,从视觉上看,空间是不相等的,因为所有项目的两侧都具有相等的空间。 第一项相对于容器边缘有一个单位的空间,但是下一项之间有两个单位的空间,因为下一项具有自己的适用间距。
在这里插入图片描述
space-evenly :项目被分配为使任意两个项目之间的间隔(以及边缘之间的空间)相等。
在这里插入图片描述

4:对齐项目(align-items)

flex-start
在这里插入图片描述
flex-end
在这里插入图片描述
center
在这里插入图片描述
stretch (默认):拉伸以填充容器(仍然遵守最小宽度/最大宽度)
在这里插入图片描述
baseline :项目是对齐的,例如基线是对齐的
在这里插入图片描述

5:对齐内容(align-content)

flex-start
在这里插入图片描述
flex-end
在这里插入图片描述
center
在这里插入图片描述
stretch (默认):线拉伸以占据剩余空间
在这里插入图片描述
space-between :项目均匀分布; 第一行在容器的开头,而最后一行在容器的结尾
在这里插入图片描述
space-around :每行周围均匀分布
在这里插入图片描述
在这里插入图片描述

第二部分

在这里插入图片描述

1:弹性盒子元素顺序(order)

在这里插入图片描述

2:弹性成长(flex-grow)

在这里插入图片描述
如果所有项目的flex-grow设置为1,则容器中的剩余空间将平均分配给所有子项。 如果其中一个子项的值为2,则剩余空间将占其他子项的两倍


.item { flex-grow: <number>; /* default 0 */ }

3:弯曲收缩(flex-shrink)

在这里插入图片描述

4:柔性 flex(flex-shrink和flex-basis组合的简写)

// 默认值为0 1 auto 。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

在这里插入图片描述

example:使用flex解决一个几乎每天都会遇到的问题

居中


// 居中

.parent { 
	display: flex; 
	height: 300px; 
} 
.child { 
	width: 100px; 
	height: 100px; 
	margin: auto;
}

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Flex布局(也称为弹性布局)是种主流的CSS布局方式,它可以方便地实现页面元素的自适应和排列。Flex布局通过定义容器和子元素的属性来实现灵活的布局效果。 在Flex布局中,有两个重要的概念:容器和子元素。容器是指应用Flex布局的父元素,而子元素则是容器内部的直接子元素。 以下是Flex布局的一些主要特点和属性: 1. 容器属性: - display: flex;:将容器设置为Flex布局。 - flex-direction:指定主轴的方向,可以是row(水平方向)、column(垂直方向)、row-reverse(水平反向)或column-reverse(垂直反向)。 - justify-content:定义了子元素在主轴上的对齐方式,可以是flex-start(起始对齐)、flex-end(末尾对齐)、center(居中对齐)、space-between(两端对齐,项目之间间隔相等)或space-around(每个项目两侧的间隔相等)。 - align-items:定义了子元素在交叉轴上的对齐方式,可以是flex-start(起始对齐)、flex-end(末尾对齐)、center(居中对齐)、baseline(基线对齐)或stretch(拉伸对齐)。 - flex-wrap:定义了子元素是否换行,可以是nowrap(不换行)、wrap(换行)或wrap-reverse(反向换行)。 2. 子元素属性: - flex:指定子元素的伸缩比例,用于控制子元素在容器中的占比。 - align-self:定义了单个子元素在交叉轴上的对齐方式,可以覆盖容器的align-items属性。 以上是Flex布局的一些基本概念和属性,通过灵活地使用这些属性,可以实现各种不同的布局效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一拖再拖 一拖再拖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值