响应式网页设计-CSS弹性盒子

最新推荐文章于 2023-02-27 19:24:26 发布
原创 最新推荐文章于 2023-02-27 19:24:26 发布 · 854 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了CSS弹性盒子（Flexbox）布局，通过display: flex定位元素，详细阐述了flex-direction、justify-content、align-items等属性的作用，帮助开发者创建响应式网页。同时，讲解了flex-wrap、flex-shrink、flex-grow、flex-basis等属性，以及order和align-self的用法，为自定义元素排列和对齐提供了更多可能性。

文章目录


CSS 灵活框布局

flex布局元素称为Flex容器(flex container),简称容器。
他的所有子元素自动称为容器成员,称为Flex项目(flex item),简称项目。

display: flex 定位两个盒子

在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面
一些元素中添加display: flex ，会自动布局，更好看

flex-direction排列成行或列

排列 flex 容器中的子元素

  • row：横向排列（主轴水平方向,起点为左端）
  • row-reverse：横向排列（主轴水平方向,起点为右端）
  • column：纵向排列（主轴垂直方向,起点为上方）
  • column-reverse：纵向排列（主轴垂直方向,起点为下方）
justify-content 属性对齐元素

在这里插入图片描述

  • center：lex 子元素在 flex 容器中居中排列
  • flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置justify-content 的值，那么这就是默认值。

在这里插入图片描述

  • flex-end：从 flex 容器的终止位置开始排列项目。

对行来说是把项目移至右边， 对于列是把项目移至底部。
在这里插入图片描述

  • space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。
    例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
    在这里插入图片描述
  • space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

在这里插入图片描述

  • space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

在这里插入图片描述

space-around space-evenly区别

space-around space-evenly区别

align-items 定义 flex 子元素沿交叉轴的对齐方式

align-items 定义 flex 子元素沿交叉轴的对齐方式

align-items 属性与 justify-content 类似。 justify-content 属性使 flex 子元素沿主轴排列。 行的主轴是水平线，列的主轴是垂直线。
Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。 行的交叉轴是垂直的，列的交叉轴是水平的。
CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。 对行来说，定义的是元素的上下对齐方式； 对列来说，是定义元素的左右对齐方式。

  • flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。

在这里插入图片描述

  • flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。

在这里插入图片描述

  • center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。

在这里插入图片描述

  • stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么这就是默认值。

在这里插入图片描述
-###### baseline：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。
在这里插入图片描述

flex-wrap 包裹一行或一列（是否换行/列）

-###### nowrap：默认值，不换行。
在这里插入图片描述

  • wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
    项目太大而无法全部显示在一行中，它们将换行到另一行
    在这里插入图片描述
  • wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

在这里插入图片描述

flex-shrink 属性定义 flex 子元素的收缩规则

针对flex 子元素

使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。
子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩

flex-grow 属性定义 flex 子元素的增长系数

与 flex-shrink 相对，flex-grow 会在容器太大时对子元素作出调整

如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍

flex-basis 属性设置元素的初始大小

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小
单位与其他表示尺寸的属性的单位一致（px、em、% 等）。 如果值为 auto，则项目的尺寸随内容调整

flex 短方法属性

flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

order 属性重新排列子元素

order 属性告诉 CSS flex 容器里子元素的顺序。 默认情况下，项目排列顺序与源 HTML 文件中顺序相同。 这个属性接受数字作为参数，可以使用负数。

align-self 属性

调整单个子元素自己的对齐方式，而不会影响到全部子元素

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

CSS弹性盒子Flex
hhhh
03-30 319
弹性盒子可以控制内部元素的布局display:flex 元素成为弹性容器，他的子元素成为弹性子元素 弹性子元素像块级元素一样填充可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，高度由他们的内容决定。 利用弹性盒子写一个菜单栏 /*外部容器设置为弹性*/ .site-nav { display: flex; padding: .5em; background-color: #5f4b44; list-style-type: n
20个CSS3 Flexbox弹性盒子响应布局示例
最新发布
10-31
响应式设计技巧 使用媒体查询 - 在不同屏幕尺寸下调整Flexbox属性 利用flex-wrap - 允许项目在小屏幕上换行 调整flex-direction - 在移动设备上切换为垂直布局 使用相对单位 - 如百分比、vw/vh等，提高布局弹性 ...
CSS3响应式布局之弹性盒子
dc1339485的博客
12-18 313
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式，及如何处理可用的空间。 自己写了一个弹性盒子的demo： 主要HTML代码： <div class="outer"> <div id="div1">1</div> <div id="div2">2...
webApp flex弹性盒子
12-05
web app flex弹性盒子布局教程，很丰富的布局案例
html响应式弹性布局,CSS3响应式布局之弹性盒子
weixin_42577243的博客
06-18 799
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式，及如何处理可用的空间。自己写了一个弹性盒子的demo：主要HTML代码：1234CSS代码：.outer {width:500px; height:300px;display: -webkit-box; /*使用弹性盒模型*/-webkit-box-orient:vert...
html怎么创建盒子,使用弹性盒子创建响应式页面 -HTML教程_小白教程_css5.net
weixin_36249942的博客
07-01 451
.flex-container {display: -webkit-flex;display: flex;-webkit-flex-flow: row wrap;flex-flow: row wrap;font-weight: bold;text-align: center;}.flex-container > * {padding: 10px;flex: 1 100%;}.main {te...
基于HTML5和CSS3的现代响应式网页设计源码
09-24
CSS3媒体查询可以根据设备的特性（如屏幕宽度、高度、分辨率等）来应用不同的样式规则，而弹性盒子布局（Flexbox）则提供了一种更加灵活的方式来设计响应式布局。这些技术的结合使得开发人员能够创建出在桌面、平板...
CSS弹性盒子.docx
02-29
CSS弹性盒子，也称为Flexbox，是CSS3中引入的一种强大的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和不同屏幕尺寸时。它允许开发者更灵活地控制元素的排列、对齐和空间分配，使网页设计更加简洁...
HTML+CSS总结，涵盖了HTML和CSS的基础知识，以及一些高级特性，如弹性盒子布局、响应式设计、CSS预处理器等
03-03
HTML和CSS是构建和设计网页的两大核心技术，它们使得网页不仅能够在各种设备上展示结构化的信息，还能提供丰富的视觉样式，并实现适应不同屏幕尺寸的响应式设计。HTML，全称为超文本标记语言，是用于构建网页结构的...
咖啡时刻响应式网页模板 - 设计师的精选模板
CSS媒体查询是实现响应式网页设计的关键技术之一。它们允许开发者针对不同的屏幕尺寸和分辨率应用不同的CSS样式规则。媒体查询使用@media规则来指定目标设备的特征，并且当这些特征与设备匹配时，相应的样式规则就会...
网页布局之》》》》弹性盒子》》》
随笔
12-13 658
网页弹性盒子》》》》box-flex 属性  按比例占据父元素的尺寸。 定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素，则 #p1 的宽度是 100 像素，而 #p2 的宽度是 200 像素： #p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari 和 Chrome */ box-fl
Web学习路线笔记（九）css3：弹性盒子+响应式布局
qq_43682422的博客
05-29 2266
第九天 1.多列（分栏） 1）column-count 规定元素应该被分隔得列数 语法：column-count:number|auto; p{column-count:3} 效果如下图 2）column-gap 规定列之间的间隔 column-gap:length|normal; 3）column-rule 设置所有column-rule-*的简写属性 a.column-rule-style :设置线形 none:定义没有线 hidden:隐藏线 dotted: 点线 solid : 实线
CSS3实战开发: 弹性盒模型之响应式WEB界面设计
cikegroup的专栏
08-06 492
各位网友大家好，如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示，相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像。 从本篇文章开始，我将带领大家，手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面。同时实战开发中的案例代码可以作为你项目中的精简框架了。   当你学习完成《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》这个系列教程之后，...
CSS盒子模型的使用及其注意事项——响应式Web系列学习笔记
weixin_43899069的博客
06-26 565
CSS中的一个基本概念就是盒子模型，所谓盒子模型就是把HTML页面中的元素看作是一个矩形区域，即元素的盒子。 盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）四部分组成。 多个盒子之间需要注意的问题 网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下： 上下相邻相邻的块元素垂直外边距合并，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。 嵌套块级元素的垂直外边距合并，父元素没有上内边距和边
应用弹性盒子设计带有导航栏的响应式网页
xin_sleep的博客
10-19 655
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹性盒子</title> <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstr
媒体查询，flex弹性盒布局，响应式布局
Jamam的博客
02-27 872
慕课网官方响应式布局课程笔记
Css3响应布局 弹性盒子
yyf0409的博客
08-08 668
弹性盒子（flexbox） 组成：弹性容器（Flex container）和弹性子元素（Flex  item） 弹性容器（Flex container）： display:flex|inline-flex; 内部包含一个或多个弹性子元素 注意：设置为弹性容器后，子元素的float/clear/vertical-align属性将失效 属性  1.flex-direction
弹性盒子，响应式布局
qq_43335204的博客
10-26 713
Flexbox模型： 伸缩容器display(用于伸缩容器) display:flex | inline-flex; flex：块伸缩容器 inline-flex：内联伸缩容器 float、clear和vertical-align在伸缩项目上没有效果。 伸缩流方向flex-direction(用于伸缩容器) flex-direction：row | row-reverse | column...
css之弹性盒子
故事与我
05-12 336
什么是弹性盒子 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 兼容性 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 弹性容器属性 flex-direction属性 flex-direction 属性指定了弹性子元素在
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值