弹性盒子HTML

最新推荐文章于 2024-05-11 17:47:03 发布

flee.咖啡

最新推荐文章于 2024-05-11 17:47:03 发布

阅读量3.2k

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/zyx13721846745/article/details/127208220

版权

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间

为什么是弹性盒子?

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。

以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

这些弹性盒子都可以实现。。。我草

指定元素的布局为弹性盒子

首先，我们需要给父元素设置display：flex

div {
display:flex
}

注意：假如你想设置行内元素为弹性盒子，也可以置 display 属性的值为 inline-flex。

示例：

<style>
.parent {
width:500px;
height:200px;
background-color:coral;
display:flex; /*弹性盒子*/
}
.parent div {
width:100px;
height:100px;
background-color:blueviolet;
}
</style>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

flex 模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局，也就是 main axis 和 cross axis：

主轴（main axis）是水平 flex 元素放置的方向延伸的轴。该轴的开始和结束被称为 main start 和 main end。

交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）

在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）

1. flex-flow

flex-direction 和 flex-wrap 的缩写 flex-flow。比如，你可以将

flex-direction: row;

flex-wrap: wrap;

缩写为

flex-flow: row wrap;

flex-direction

它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（从左到右）。

尝试将以下声明添加到 section 元素的 css 规则里：

flex-direction: column;  /*子元素总高度大于父元素高度也不会超出，会自适应*/

你会看到，这会将那些元素设置为列布局

注意：你还可以使用 row-reverse 和 column-reverse 值反向排列 flex 项目。用这些值试试看吧！

flex-wrap

当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的弹性盒子子元素会溢出，破坏了布局。

min-width: 100px; /*最小宽度100*/

在这里我们看到，子代确实超出了它们的容器。解决此问题的一种方法是将以下声明

flex-wrap: wrap

2. flex

flex 缩写

auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto

none：计算值为 0 0 auto
inherit：从父元素继承

[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

[ flex-shrink ]：定义弹性盒子元素的收缩比率。

动态尺寸

现在让我们来看看如何控制 flex 项占用空间的比例。

给子项加入：

flex: 1

这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。因为它是一个比例，这意味着将每个 flex 项的设置为 400000 的效果和 1 的时候是完全一样的。

现在在上一个规则下添加：

flex: 2; /* 你会发现：第2个占用2/4的空间 */

您还可以指定 flex 的最小值，会至少分配400的空间，剩下的可用空间再大家分配

flex-shrink

flex-grow、 flex-basis上面已经讲过了， flex-shrink 用于设置如何分配溢出的内容

这个示例中，假设忽略那个 1px 的 border，实际上盒子超出了 80px，那么超出的 80px 给 class d1 的分一份，class d2 的元素会分两份，所以 d2 缩得的多一些，可以自己试试

3. 水平和垂直对齐

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items

设置或检索弹性盒子元素在纵轴方向上的对齐方式。

align-items: stretch | center | flex-start | flex-end | baseline

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。

space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

align-self

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。这个属性可能看起来有点难理解，实际上就是子元素在纵轴上的位置

align-self: auto | flex-start | flex-end | center | baseline | stretch

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果子项没有设置固定高度，那么扩展充满父容器

4. flex项排序

弹性盒子也有可以改变 flex 项的布局位置的功能，而不会影响到源顺序（即 dom 树里元素的顺序）。这也是传统布局方式很难做到的一点。

给 d1 元素设置 order: 1 他跑到结尾去了，怎么回事？

它实现的一些细节：

所有 flex 项默认的 order 值是 0
order 值大的 flex 项比 order 值小的在显示顺序中更靠后

相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一
你也可以给 order 设置负值使它们比值为 0 的元素排得更前面

5. flex嵌套

弹性盒子也可以互相嵌套，给子项设置 flex 即可

csscss3html

来自专栏

web前端

resize,m_fixed,h_224,w_224 Hermione Grangerㅤ 2篇文章 1人订阅

发布于2022-02-22著作权归作者所有

相关推荐更多

弹性盒子（flexbox）布局属性详解

橘猫吃不胖～ 6934 阅读 2 评论

CSS3 弹性盒子(Flex Box)

爱喝牛奶~ 4221 阅读 1 评论

热门推荐解决启动Nvidia Geforce Experience启动报错“Something went wrong”

smileglaze 13万+ 阅读 8 评论

CSS3 弹性布局 flex

昨夜太平长安888 226 阅读 0 评论

最新发布关于前端弹性盒的基础理解

中芯12341 88 阅读 0 评论

弹性盒子 flex-box

lc_web 446 阅读 0 评论

弹性盒子css_嘟噜嘟噜123的博客_css弹性盒子

1,定义 弹性盒子是CSS3 的一种新的布局模式。CSS3弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 2,内容 弹性盒子由弹性容器(Flexcontainer)和弹性子元素(F...

CSS布局之“弹性盒子布局”_晚风无名的博客_css弹性盒子...

一、弹性盒子概述 (1)弹性盒子布局(Flexbox Layout),元素可以拉伸以填充额外的空间,也可以收缩以适应更小的空间。 (2)Flexbox可以解决弹性元素在弹性容器中的垂直居中、间隙平均分配和自动占据剩余空间等问题。二、弹性盒子组成弹性盒...

css弹性盒子详解_释xin的博客_css弹性盒子

弹性盒子 = 弹性容器 + 弹性子元素弹性容器如何定义:通过设置display的值为flex或者inline-flex 特色:弹性容器外和弹性子元素的渲染是正常渲染,弹性盒子只定义了弹性子元素如何布局。注意:弹性子元素通常在弹性盒子内一行显示。默认情况...

css之弹性盒子_浅浅u的博客_css中弹性盒子

flex(弹性盒,伸缩盒) -是css中又一种高级的布局手段,主要就是用来替代浮动布局 - flex布局通常是用于移动端,自适应布局 - 通过display:flex; 就可以设置该元素为弹性盒, - 注意:一旦为元素设置了flex , 该元素的clear float 失效...

CSS基础7-弹性盒子_鹏程933的博客

CSS基础7-弹性盒子 弹性盒子:是一种新布局属性,让元素有能力控制子元素排列语法:display:flex|inline-flex; 注:变成弹性盒子后,里面项目就有了其他属性,可以在容器里拉伸或收缩,改变排列顺序与方式...

CSS3弹性盒子

Chao Wong 87 阅读 0 评论

CSS3系列 11 弹性布局

云崖先生 213 阅读 0 评论

resize,m_fixed,h_150

弹性布局flex属性详解

人人都在发奋 1万+ 阅读 0 评论

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Lq65Lq66YO95Zyo5Y-R5aWL,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

解决flex布局space-between最后一行布局问题超简单方法

至尊绝伦 3152 阅读 4 评论

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Iez5bCK57ud5Lym,size_20,color_FFFFFF,t_70,g_se,x_16

flee.咖啡

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子HTML

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间为什么是弹性盒子?长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有float和position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。以下简单的布局需求是难以或不可能用这样的工具方便且灵活的实现的：在父内容里面垂直居中一个块内容。使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。使多列布局中的
复制链接

扫一扫