超Q的弹性盒子——flex✨

简介: 还记得小时候的QQ糖吗,超Q的口感。而在布局中所使用的弹性盒子也会让你在开发中QQ弹弹Come on baby

超Q的弹性盒子——flex✨

还记得小时候的QQ糖吗,超Q的口感。

而在布局中所使用的弹性盒子也会让你在开发中QQ弹弹

Come on baby

为什么说它超弹呢?

  1. 与传统布局对比:
  • 传统布局:基于盒状模型,依赖 display,position,float属性,并且它对于那些特殊布局非常不方便,比如,无法直接实现垂直居中
  • flex布局:它是一种一维的布局模型,它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力,所以它能很简单地实现一些特殊布局。
  1. 它的特性与概念:
  • 任何一个容器(div)都可以使用flex布局
  • 采用flex布局的元素被成为flex容器,所有子元素都会成为它的成员。
  • 采用flex的元素其float,clear都会失效
  • 一维的特性使其拥有两根轴,水平的主轴与垂直的交叉轴(默认主轴排列)

Q弹的配料之flex属性

在flex容器中加入六种配料即六种属性,让布局更简单!

  1. flex-direction属性
    flex-direction属性决定主轴的方向
属性值 作用
row 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
colmun 主轴为垂直方向,起点在上端
colmun-reverse 主轴为垂直方向,起点在下端
.flex-box {
  flex-direction: row ;
  flex-direction: row-reverse ;
  flex-direction: column ;
  flex-direction: column-reverse ;
}
复制代码

1.webp.jpg

2. flex-wrap属性

flex属性定义在一条轴线上子成员发生拥挤,如何换行排列。

属性值 作用
nowrap 不换行(将子成员宽度缩小)
wrap 换行且第一行在上方
wrap-reverse 换行且第一行在下方
.flex-box {
  flex-wrap: nowrap ;
  flex-wrap: wrap ;
  flex-wrap: wrap-reverse;
}
复制代码

1.webp.jpg

3. justify-content属性

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

属性值 作用
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,且间隔相等
space-around 每个子成员间隔相等
.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
}
复制代码

1.webp.jpg

4. align-items属性

align-items属性定义项目在交叉轴上如何对齐。

属性值 作用
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 如果项目未设置高度或设为auto,将占满整个容器的高度
.flex-box {
  align-items: flex-start ;
  align-items: flex-end ;
  align-items: center ;
  align-items: baseline ;
  align-items: stretch ;
}
复制代码

1.webp.jpg

5.  align-content属性

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

属性值 作用
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
baseline 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴
.flex-box {
  justify-content: flex-start ;
  justify-content: flex-end ;
  justify-content: center ; 
  justify-content: space-between ;
  justify-content: space-around ;
  justify-content: stretch;
}
复制代码

1.webp.jpg



相关文章
|
5月前
|
前端开发 容器
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
|
4月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
2月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
3月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
402 57
|
1月前
|
容器
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
Bootstrap5 Flex(弹性)布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式,支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽,而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。
|
2月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
2月前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
47 10