初学HTML5——响应式栅格系统

本文深入探讨CSS弹性盒布局的七大核心属性:display、flex-flow、justify-content、align-items、order、flex及align-self,解析如何运用这些属性实现响应式、自适应的网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.栅格系统:

在网页制作中,栅格系统就是用固定的格子进行网页布局,是一种清晰,工整的设计风格

二.弹性盒布局:

  • 弹性盒分为容器,子元素,轴(横轴,纵轴)
  • 弹性盒改进了块模块,既不使用浮动,也不会在弹性盒容器与其内容之间合并外边距,是一种非常灵活的布局方法。

1.display

display用于指定弹性盒的容器,其值可以为flex;如果为行内元素,值为inline-flex.

2.flex-flow

flex-flow是属性flex-directionflex-wrap的简写,用于排列弹性子元素。
-flex-direction

取值描述
row弹性盒子元素按轴方向顺序排列,默认值
row-reverse弹性盒子元素按轴方向逆序排列
column弹性盒子元素按纵轴方向顺序排列
column-reverse弹性盒子元素按纵轴方向逆序排列
  • flex-wrap
取值描述
nowrapflex容器为单行,该情况下flex子项可能会溢出容器
wrap弹性盒子元素按轴方向逆序排列
wrap-reverse弹性盒子元素按纵轴方向逆序排列

在这里插入图片描述

3.justify-content

justify-content属性能够设置子元素如何在当前轴方向的排列,取值如小表所示:

取值描述
flex-start弹性盒子元素将向行起始位置对齐
flex-end弹性盒子元素将向行结束位置对齐
center弹性盒子元素按将向行中间位置对齐
space-between弹性盒子元素会平均地分布在行里
space-around弹性盒子元素会平均地分布在行里

在这里插入图片描述

4.align-items

align-items属性用于设置子元素在垂直于轴的方向上的排列,其取值如下表所示:

取值描述
flex-start弹性盒子元素向垂直于轴的方向上的起始位置对齐
flex-end弹性盒子元素向垂直于轴的方向上的结束位置对齐
center弹性盒子元素向垂直于轴的方向上的中间位置对齐
baseline如弹性盒子元素的行内轴与侧轴为同一条,则该值与‘flex-star’等效。其他情况下,该值将参与基线对齐
stretch如果指定侧轴大学的属性值为“auto”,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照“min/max-width/height”属性的限制

在这里插入图片描述

5.order

order属性用于设置子元素出现的顺序,取值为1,2,3…

6.flex

flex属性是flex-grow(扩展比率),flex-shrink(收缩比率)和flex-basis(宽度,像素值)的缩写,能够设置子元素的伸缩性。

7.align-self

align-self属性能够覆盖容器中的align-items属性,用于设置单独的子元素如何沿着纵轴排列
其取值有auto|flex-star|flex-end|center|baseline|stretch,每个值的意义与align-items属性的取值类似。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值