Flex 弹性布局

最新推荐文章于 2024-02-12 22:19:08 发布
最新推荐文章于 2024-02-12 22:19:08 发布
阅读量358 收藏 2
点赞数 1
分类专栏： css属性 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhzijun/article/details/115728039
版权

Flex 弹性布局

Flex(弹性) 布局

网页布局（layout）是CSS的一个重点应用。

image.png

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

image.png

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

image.png

1.概念

弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。

传统布局比较

两端对齐布局：
传统布局：
  • 需要精确计算宽度及外边距，会很麻烦

image.png

伸缩布局：
  • 自动精确控制对齐，无需计算

image.png

容器和项目

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

image.png

容器默认存在两根轴：水平的主轴（main axis）[x 轴] 和垂直的交叉轴（cross axis）[y 轴] 。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex 容器中的所有 flex 元素都会有下列行为：

  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
  • 元素从主轴的起始线开始。
  • 元素不会在主维度方向拉伸，但是可以缩小。
  • 元素被拉伸来填充交叉轴大小。
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。
两种容器

容器可以设置为两个值 flex，inlie-flex

区别

  • felx：容器成为块元素
  • inline-flex：容器成为行内块元素，不会占满全屏

flex

img

img

inline-flex

img

2. 容器的属性

设计在容器上的属性

  • flex-direction - 调整主轴方向
  • justify-content - 调整主轴方向对齐方式
  • align-items - 调整侧轴方向对齐方式
  • flex-wrap - 控制是否换行
  • align-content - 堆栈排列
  • flex-flow - flex-direction和flex-wrap的简写形式
  • flex - 控制子元素伸缩比例
  • align-self - 同align-items可覆盖父元素设置的algin-items
  • order - 控制子元素的顺序

注意：

下面前3个方法的css代码都是基于此html代码所设计样式：

<div class="box">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

1.flex-direction - 调整主轴方向

调整主轴方向（默认为水平方向）包括

  • row（主轴为水平方向，起点在左端）
  • column（主轴为垂直方向，起点在上沿）
  • row-reverse（主轴为水平方向，起点在右端）
  • column-reverse（主轴为垂直方向，起点在下沿）
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
1.flex-direction : row

css代码：

.box{
	display: flex;
	/* 默认是水平排列，起点在左端 */
	flex-direction: row;
	background-color: #ccc;
}
.box div{
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
	background-color: pink;
	margin-left: 40px;
}

效果展示：

image.png

2.flex-direction : row-reverse

css代码：

.box{
	display: flex;
	/* 水平排列，起点在右端 */
	flex-direction: row-reverse;
	background-color: #ccc;
}
.box div{
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
	background-color: pink;
	margin-left: 40px;
}

效果展示：

image.png

3.flex-direction : column

css代码：

.box{
	display: flex;
	/* 改变排列方向，起点在上 */
	flex-direction: column;
	background-color: #ccc;
	width: 100%;
	height: 520px;
}
.box div{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}
.box div:nth-child(2)
,.box div:nth-child(3){
	margin-top: 40px;
}

效果展示：

image.png

4.flex-direction : column-reverse

css代码：

.box{
	display: flex;
	/* 改变排列方向，起点在下 */
	flex-direction: column-reverse;
	background-color: #ccc;
	width: 100%;
	height: 520px;
}
.box div{
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}
.box div:nth-child(2)
,.box div:nth-child(3){
	margin-bottom: 40px;
}

效果展示：

image.png

2.justify-content - 调整主轴方向对齐方式

主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括

  • flex-start - 起始点对齐
  • flex-end - 终止点对齐
  • center - 居中对齐
  • space-around - 四周环绕
  • space-between - 两端对齐
1.justify-content : flex-start

css代码：

.box {
	display: flex;
	/* 起始点对齐 */
	justify-content: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image.png

2.justify-content : flex-end

css代码：

.box {
	display: flex;
	/* 终止点对齐 */
	justify-content: flex-end;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image.png

3.justify-content : center

css代码：

.box {
	display: flex;
	/* 居中对齐 */
	justify-content: center;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image.png

4.justify-content : space-around

css代码：

.box {
	display: flex;
	/* 四周环绕 */
	justify-content: space-around;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image20210116135902375.png

5.justify-content : space-between

css代码：

.box {
	display: flex;
	/* 两端对齐 */
	justify-content: space-between;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image.png

3.align-items - 调整侧轴方向对齐方式

调整侧轴方向对齐方式，包括:

  • flex-start - 侧轴起始点对齐
  • flex-end - 侧轴终止点对齐
  • center - 侧轴居中对齐
  • stretch - 拉伸项目
1.align-items : flex-start

css代码：

.box {
	display: flex;
	/* 侧轴起始点对齐 */
	align-items: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image20210116195317257.png

2.align-items : flex-end;

css代码：

.box {
	display: flex;
	/* 侧轴终点点对齐 */
	align-items: flex-end;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image20210116195635834.png

3.align-items : center;

css代码：

.box {
	display: flex;
	/* 侧轴居中对齐 */
	align-items: center;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image20210116195759312.png

4.align-items : stretch;

注意：弹性盒子侧轴为水平,如果其项目没有宽度,则会拉伸至弹性盒子一样的宽,如果侧轴为垂直,如果其项目没有高度,则会拉伸至弹性弹性盒子一样高

css代码：

.box {
	display: flex;
	/* 拉伸项目 */
	align-items: stretch;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}
/** 默认值，项目被拉伸以适应容器   
	 * 让子元素的高度拉伸适用父容器 
	 * 子元素不给高度的前提下 */
.box div {
	width: 100px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

效果展示：

image.png

注意：

下面3个方法的css代码都是基于此html代码所设计样式：

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</div>

4.flex-wrap - 控制是否换行

控制是否换行，包括：

  • nowrap - 不换行
  • wrap - 自动换行
  • wrap-reverse - 在反方向，自动换行
1.flex-wrap : nowrap

css代码：

.box {
	display: flex;
	/* 不换行,默认是不换行 */
	flex-wrap: nowrap;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	width: 200px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
}

效果展示：

image.png

2.flex-wrap : wrap

css代码：

.box {
	display: flex;	
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
	background-color: #ccc;
	width: 100%;
	height: 600px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

效果展示：

image.png

3.flex-wrap : wrap-reverse

css代码：

.box {
	display: flex;
	/* 反向进行换行 */
	flex-wrap: wrap-reverse;
	background-color: #ccc;
	width: 100%;
	height: 600px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

效果展示：

image.png

5.align-content - 堆栈排列

堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，包括：

  • flex-start - 起始点对齐
  • flex-end - 终止点对齐
  • center - 居中对齐
  • space-between - 两端对齐
  • **space-around - 四周环绕 **
  • stretch - 拉伸
1.align-content : flex-start

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
	/* 起始点对齐 */
	align-content: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

2.align-content : flex-end

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
	/* 终点对齐 */
	align-content: flex-end;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

3.align-content : center

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
	/* 居中对齐 */
	align-content: center;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image20210118211548440.png

4.align-content : space-between

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
    /* 两端对齐 */
	align-content: space-between;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

5.align-content : space-around

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
    /* 两端对齐 */
	align-content: space-between;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

6.align-content : stretch

css代码：

.box {
	display: flex;
	/* 当内容超出父盒子的宽度换行 */
	flex-wrap: wrap;
    /* 拉伸 */
	align-content: stretch;
	background-color: #ccc;
	width: 100%;
	height: 640px;
}

.box div {
	width: 250px;
	/* height: 250px; */
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

6.flex-flow： flex-direction和flex-wrap的简写形式

flex-direction和flex-wrap的简写形式,可以同时使用flex-direction和flex-wrap里面的属性方法

css代码：

.box {
	display: flex;
	/* 前面是flex-direction方法里面的row属性 默认是水平排列，起点在左端
	   后面是flex-wrap方法里面的wrap-reverse属性 反向进行换行*/
	flex-flow: row wrap-reverse; 
	background-color: #ccc;
	width: 100%;
	height: 740px;
}

.box div {
	width: 250px;
	height: 250px;
	text-align: center;
	line-height: 100px;
	background-color: pink;
	margin-left: 10px;
	margin-top: 10px;
}

演示代码：

image.png

7.flex - 控制子元素伸缩比例

控制子元素伸缩比例

flex121

image.png

flex21

image.png

8.align-self - 同align-items可覆盖父元素设置的algin-items

同align-items可覆盖父元素设置的algin-items，包括：

  • flex-start - 起始点对齐
  • flex-end - 终止点对齐
  • center - 居中对齐
  • stretch - 拉伸项目

html代码:

<div class="box">
    <div>1</div>
	<div>2</div>
	<div>3</div>
</div>
1.align-items : flex-start
.box {
	display: flex;
	/* 侧轴终点点对齐 */
	align-items: flex-end;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	/* 侧轴终点点对齐 */
	align-self: flex-end;
	width: 200px;
	/* height: 100px; */
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

代码演示：

image20210118220507232.png

2.align-items : flex-end
.box {
	display: flex;
	/* 侧轴起始点对齐 */
	align-items: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	/* 侧轴终点点对齐 */
	align-self: flex-end;
	width: 200px;
	/* height: 100px; */
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

代码演示：

image.png

3.align-items : center
.box {
	display: flex;
	/* 侧轴起始点对齐 */
	align-items: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	/* 侧轴居中对齐 */
	align-self: center;
	width: 200px;
	/* height: 100px; */
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

代码演示：

image.png

4.align-items : stretch
.box {
	display: flex;
	/* 侧轴起始点对齐 */
	align-items: flex-start;
	background-color: #ccc;
	width: 100%;
	height: 500px;
}

.box div {
	/*  拉伸 */
	align-self: stretch;
	width: 200px;
	/* height: 100px; */
	text-align: center;
	line-height: 100px;
	background-color: pink;
}

.box div:nth-child(2),
.box div:nth-child(3) {
	margin-left: 40px;
}

代码演示：

image20210118220901438.png

9.order - 控制子元素的顺序

控制子元素的顺序，默认 order 值越小越在排在前面。

默认的order，应该是0。因为order设置为负数的，排序在没设置order的元素之前。order越小，越靠近flex-start的位置。

html:

<div class="box">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
</div>

这是默认顺序：

image.png

css代码：

.box {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction:column;
}
.item {
    width: 70px;
    height: 36px;
    line-height:36px;
    vertical-align:center;
    color:white;
    text-align:center;
}
.item:nth-child(1){
    background:red;
    order:4;
}
.item:nth-child(2){
    background:blue;
}
.item:nth-child(3){
    background:pink;
    order:1;
}
.item:nth-child(4){
    background:gray;
    order:-1;
}

这是使用了order后的顺序：

image.png

10.flex-basis

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-basis 属性。

注意: Safari 6.1 及更新版本通过 -webkit-flex-basis 属性支持该属性。

image.png

11.flex-grow

image.png

注意: Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。

注意: Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。

12.flex-shrink

div 总宽度为 500px, flex-basic 为 120px。

A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2

D , E 宽度与 A, B, C 不同

image.png

哲子君
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局：打造灵动、响应式网页设计的利器
JINGWHALE
06-11 859
Flex布局，又称弹性盒布局，是现代CSS布局体系中的璀璨明珠。它以革命性的理念革新了传统的网页布局方式，为设计师和开发者提供了前所未有的灵活性与便捷性。本篇内容精讲将引领您全方位领略Flex布局的魅力，深入剖析其工作原理与核心属性，助您在实践中轻松驾驭复杂、响应式的网页设计。
CSS常用布局二（flex布局）
BreenCL的博客
07-20 3380
flex布局 前言：flex是flexible box的缩写，译为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，只需要设置“display:flex"即可；行内元素可以通过设置”display:inline-flex“实现；需要注意的是，如果设置了flex布局，则子元素的float、clear和vertical-align属性将失效； 1.基本概念 使用了flex布局的元素，称为flex容器（flex container），简称为”容器“。它所有的子元素自动生成容器成员，
flex布局（详解）
fish_zhangyu的博客
10-13 2万+
Flex是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局.box{行内元素也可以使用flex布局.box{Webkit内核的浏览器，需要加上-webkit前缀。.box{
Flex布局 （上万字）超详细讲解 这篇就够了
最新发布
制定持续可量化的目标，不断坚持。
02-12 2万+
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
flex布局
YMYYZ的博客
01-31 8707
flex布局的详细解读
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 11万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: 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. ...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
Flex弹性布局详解
09-29
形象生动讲解CSS布局，Flex弹性布局生动形象的理解，更好的理解弹性布局
flex弹性布局用法笔记
01-20
【flex弹性布局】是CSS3中的一种布局模式，它极大地增强了网页和应用程序的布局能力，使得开发者能够更灵活地控制元素的排列、对齐和大小调整。以下是对flex弹性布局中核心属性的详细解释： 1. **display: flex** -...
flex弹性布局基本语法（修改版）.pdf
12-01
Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...
flex弹性布局（详解）
wshwsh_的博客
08-09 1万+
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex布局看这一篇就够了
qq_46048008的博客
08-20 2万+
“弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化声明定义容器里面包含着项目元素，使用或声明为弹性容器。
Flex布局详细解析
前端卷王小白的博客
04-16 9644
Flex布局完整的详细解析,轻松学会并应用Flex布局
Flex布局全面介绍
qq_59305028的博客
07-17 8121
Flex基本介绍
flex布局详解
程序员小明1024
12-20 6002
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
flex布局（弹性布局）
weixin_52580677的博客
01-07 2万+
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布flex-direction决定了main axis的方向，有4个取值：效果如下 justify-content决定了flex items在main axis 上的对齐方式，共6个取值：效果如下： ali
利用flex实现图文混排
hanker的博客
12-26 2130
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" content="
flex弹性布局的缺点
04-03
1. 兼容性问题：flex弹性布局在一些旧浏览器和移动端设备上可能存在兼容性问题，需要使用浏览器前缀或者polyfill进行兼容处理。 2. 学习成本：相对于传统的布局方式，flex弹性布局需要学习新的语法和属性，对于新手...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值