21.6 CSS 弹性布局

2023-10-08 07:15
文章标签 布局 css frontend 弹性 21.6

本文主要是介绍21.6 CSS 弹性布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

image-20231007121635888

1. 弹性盒子

CSS弹性盒子(Flexbox)是一种布局模型, 用于创建灵活的, 自适应的网页布局.
它的目的是在不同屏幕尺寸和设备上实现一致的布局效果.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列, 对齐和分配空白空间.
弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器.弹性盒子由容器(flex container)和其内部的项目(flex items)组成.
弹性容器内包含了一个或多个弹性子元素.注意事项: 
* 1. 弹性容器外及弹性子元素内是正常渲染的.
* 2. 弹性盒子只定义了弹性子元素如何在弹性容器内布局.
* 3. 弹性子元素通常在弹性盒子内一行显示.
* 4. 默认情况每个容器只有一行.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>创建盒子</title><style>.flex-container {display: flex;height: 250px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>
</html>

image-20231006210713181

2. 盒子排列方式

2.1 排列方式1

可以设置容器的direction属性, 指定弹性容器中子元素的排列方式.
常用属性值:
* 1. ltr(left-to-right): 从左到右的方式排列(默认).
* 2. rtl(right-to-left): 从右到左的方式排列.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>排序方式</title><style>.flex-container {display: flex;height: 250px;background-color: #2b2b2d;direction: rtl;}.flex-item {background-color: #00fbff;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div></body>
</html>

image-20231006211434118

2.2 排列方式2

可以设置容器的flex-direction属性, 指定弹性子元素在父容器排列方式.常用属性值:
* 1. row: 横向从左到右排列(左对齐), 默认的排列方式.
* 2. row-reverse: 反转横向排列(右对齐), 从后往前排, 最后一项排在最前面.
* 3. column: 纵向排列.
* 4. column-reverse: 反转纵向排列, 从后往前排, 最后一项排在最上面.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>排序方式2</title><style>.flex-container {display: flex;height: 150px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 30px;margin: 10px;}.row {flex-direction: row;}.row-reverse {flex-direction: row-reverse;}.column {flex-direction: column;}.column-reverse {flex-direction: column-reverse;}</style>
</head>
<body><div class="flex-container row"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container row-reverse"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container column"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div>
<br>
<div class="flex-container column-reverse"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>
</div>
</body>
</html>

image-20231006212838689

3.盒子对齐方式

3.1 水平对齐方式

可以通过容器的justify-content属性, 设置弹性盒子元素在主轴(横轴)方向上的对齐方式.常用属性值:
* 1. flex-start: 弹性项目向行头紧挨着填充(默认).第一个弹性项的main-start外边距边线被放置在该行的main-start边线, 而后续弹性项依次平齐摆放.* 2. flex-end: 弹性项目向行尾紧挨着填充.第一个弹性项的main-end外边距边线被放置在该行的main-end边线, 而后续弹性项依次平齐摆放.* 3. center: 弹性项目居中紧挨着填充.如果剩余的自由空间是负的, 则弹性项目将在两个方向上同时溢出.* 4. space-between: 弹性项目平均分布在该行上.如果剩余空间为负或者只有一个弹性项, 则该值等同于flex-start.否则, 1个弹性项的外边距和行的main-start边线对齐, 而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上, 相邻项目的间隔相等.* 5. space-around: 弹性项目平均分布在该行上, 两边留有一半的间隔空间.如果剩余空间为负或者只有一个弹性项, 则该值等同于center.否则, 弹性项目沿该行分布, 且彼此间隔相等(比如是20px), 同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px).
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>对齐方式</title><style>.flex-container {display: flex;height: 60px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 30px;margin: 10px;}.flex-start {justify-content: flex-start;}.center {justify-content: center;}.flex-end {justify-content: flex-end;}.space-between {justify-content: space-between;}.space-around {justify-content: space-around;}</style>
</head>
<body><div class="flex-container flex-start"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container center"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container flex-end"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container space-between"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container space-around"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div></body>
</html>

image-20231006224437645

3.2 垂直对齐方式

可以通过容器的align-items属性, 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式.常用属性值:
* 1. flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界.
* 2. flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界.
* 3. center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置. 如果该行的尺寸小于弹性盒子元素的尺寸, 则会向两个方向溢出相同的长度.
* 4. baseline: 如弹性盒子元素的行内轴与侧轴为同一条, 则该值与'flex-start'等效.其它情况下, 该值将参与基线对齐.
* 5. stretch: 如果指定侧轴大小的属性值为'auto', 则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>垂直对齐方式</title><style>.flex-container {display: flex;height: 150px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 30px;margin: 10px;}.flex-start {align-items: flex-start;}.center {align-items: center;}.flex-end {align-items: flex-end;}.baseline {align-items: baseline;}.stretch {align-items: stretch;}</style>
</head>
<body><div class="flex-container flex-start"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container center"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container flex-end"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container baseline"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div>
<br>
<div class="flex-container stretch"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">4</div>
</div></body>
</html>

image-20231006224501190

4. 换行方式

可以通过容器的flex-wrap属性, 设置弹性盒子的子元素超出父容器时是否换行.常用属性值:
* 1. nowrap: 默认, 弹性容器为单行.该情况下弹性子项可能会溢出容器.* 2. wrap: 弹性容器为多行.该情况下弹性子项溢出的部分会被放置到新行, 子项内部会发生断行.* 3. wrap-reverse: 反转wrap排列.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>换行方式</title><style>.flex-container {display: flex;width: 300px;height: 250px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 100px;margin: 10px;}.nowrap {flex-wrap: nowrap;}.wrap {flex-wrap: wrap;}.wrap-reverse {flex-wrap: wrap-reverse;}</style>
</head>
<body>
<div><div class="flex-container nowrap"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div></div>
</div><br>
<div class="flex-container wrap"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
<br>
<div class="flex-container wrap-reverse"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
</body>
</html>

image-20231006231931371

5. 多行对齐方式

可以通过容器的align-content属性, 控制多行弹性容器内各行的对齐方式(修改flex-wrap属性的行为).常用属性值:
* 1. flex-start: 各行集中在弹性容器的起始位置.
* 2. flex-end: 各行集中在弹性容器的末尾位置.
* 3. center: 各行集中在弹性容器的垂直中心位置.
* 4. space-between: 各行之间均匀分布, 首行对齐弹性容器的起始位置, 末行对齐弹性容器的末尾位置.
* 5. space-around: 各行之间均匀分布, 包括首行和末行, 行与行之间的空白空间相等.
* 6. stretch: 如果子项没有设置高度, 则将行拉伸以填充整个行.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>多行对齐方式</title><style>.flex-container {display: flex;width: 200px;height: 220px;background-color: #2b2b2d;flex-wrap: wrap;}.flex-item {background-color: #00fbff;width: 50px;height: 50px;margin: 10px;}.flex-start {align-content: flex-start;}.center {align-content: center;}.flex-end {align-content: flex-end;}.space-between {align-content: space-between;}.space-around {align-content: space-around;}</style>
</head>
<body>
<div><div class="flex-container"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div></div>
</div>
<br><div class="flex-container flex-start"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
<br><div class="flex-container center"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
<br><div class="flex-container flex-end"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
<br><div class="flex-container space-between"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div>
<br><div class="flex-container space-around"><div class="flex-item"> flex item 1</div><div class="flex-item"> flex item 2</div><div class="flex-item"> flex item 3</div>
</div></body>
</html>

image-20231007003507801

6. 项目次序

可以通过容器子元素的的order属性, 设置弹性容器内弹性子元素的排序.
属性值: <integer>: 用整数值来定义排列顺序, 数值小的排在前面. 可以为负值.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>项目次序</title><style>.flex-container {display: flex;width: 400px;height: 200px;background-color: #2b2b2d;}.flex-item {background-color: #00fbff;width: 100px;height: 100px;margin: 10px;}.order-0 {order: 0;}.order-1 {order: 1;}.order-2 {order: 2;}</style>
</head>
<body>
<div><div class="flex-container"><div class="flex-item order-2"> flex item 1</div><div class="flex-item order-1"> flex item 2</div><div class="flex-item order-0"> flex item 3</div></div>
</div>
</body>
</html>

image-20231007004321070

7. 项目对齐

7.1 外间距对齐方式

可以为容器子元素设置margin外间距属性, 控制子项的显示位置.常用设置方式:
* 1. margin-light: auto;  右边距设置为最大值.
* 2. margin-left: auto;   左边距设置为最大值.
* 3. margin-top: auto;    上边距设置为最大值.
* 4. margin-button: auto; 下边距设置为最大值.
* 5. margin: 0 auto;  水平居中.
* 6. margin: auto 0;  垂直居中.
* 7. margin: auto;  完全居中.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>项目对齐</title><style>.flex-container {display: flex;height: 250px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;width: 75px;height: 75px;margin: 10px;}.flex-item {margin: auto;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div>
</div></body>
</html>

image-20231007113606125

7.2 垂直对齐方式

可以通过容器子元素的的align-self属性, 设置弹性元素自身在侧轴(纵轴)方向上的对齐方式.常用属性值:
* 1. auto: 如果'align-self'的值为'auto';则其计算值为元素的父元素的'align-items', 如果其没有父元素, 则计算值为'stretch'.* 2. flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界.* 3. center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置.如果该行的尺寸小于弹性盒子元素的尺寸, 则会向两个方向溢出相同的长度.* 4. flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界.* 5. baseline: 如弹性盒子元素的行内轴与侧轴为同一条, 则该值与'flex-start'等效.其它情况下, 该值将参与基线对齐.* 6. stretch: 如果指定侧轴大小的属性值为'auto';则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸, 但同时会遵照'min/max-width/height'属性的限制.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>垂直对齐</title><style>.flex-container {display: flex;height: 250px;background-color: #2b2b2d;}.flex-item {background-color: cornflowerblue;width: 60px;min-height: 100px;margin-right: auto;}.flex-start {align-self: flex-start;}.center {align-self: center;}.flex-end {align-self: flex-end;}.baseline {align-self: baseline;}.stretch {align-self: stretch;}</style>
</head>
<body><div class="flex-container"><div class="flex-item flex-start">flex-start</div><div class="flex-item center">flex-end</div><div class="flex-item flex-end">center</div><div class="flex-item baseline">baseline</div><div class="flex-item stretch">stretch</div>
</div>
</body>
</html>

image-20231007114642411

8. 分配空间

可以通过容器子元素的的flex属性, 指定弹性子元素如何分配空间.常用属性值:
* 1. auto: 计算值为: 1 1 auto, 表示弹性子元素可以根据需要自动扩展或收缩, 并且基准值为自动.
* 2. initial: 计算值为: 0 1 auto, 表示弹性子元素不扩展, 可以收缩, 并且基准值为自动.
* 3. none: 计算值为: 0 0 auto, 表示弹性子元素不扩展, 也不收缩, 并且基准值为自动.
* 4. inherit: 从父元素继承该属性的值.
* 5. [flex-grow]:   定义弹性子元素的扩展比率, 用于指定弹性子元素在剩余空间中的相对大小.
* 6. [flex-shrink]: 定义弹性子元素的收缩比率, 用于指定弹性子元素在空间不足时的相对缩小程度.
* 7. [flex-basis]:  定义弹性子元素的默认基准值, 用于指定弹性子元素在没有剩余空间时的大小.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>分配空间</title><style>.flex-container {display: flex;height: 250px;background-color: lightgrey;}.flex-item {background-color: cornflowerblue;margin: 10px;}/* 2/4 */.flex-2 {flex: 2;}/* 1/4 */.flex-1 {flex: 1;}</style>
</head>
<body><div class="flex-container"><div class="flex-item flex-2">flex item 1</div><div class="flex-item flex-1">flex item 2</div><div class="flex-item flex-1">flex item 3</div>
</div></body>
</html>

image-20231007115649231

这篇关于21.6 CSS 弹性布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/163613

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求