CSS现代布局弹性盒子FlexBox

本文深入探讨了FlexBox布局的优势和用法,包括如何创建灵活的一维布局,设置主轴和横轴方向,控制项目对齐方式,以及更改项目顺序。FlexBox简化了浮动和定位的复杂性,实现等宽、居中等布局效果,并提供了响应式设计的能力。此外,文章还展示了如何通过调整flex属性和对齐方式来实现不同项目之间的空间分配。
摘要由CSDN通过智能技术生成

参考

本文参考自MDN: 查看原文链接.

为什么使用flexBox

Flexbox是一种用于按行或列布局项目的一维布局方法。 物品可以弯曲以填充额外的空间,并收缩以适合较小的空间

简而言之,以前使用浮动和定位来布局的效果很有效,但是能够实现的效果有限,所以出现了flexBox
使用flexBox可以轻松地实现一些漂亮的布局,比如,等宽度填充长度、将内容块垂直居中放置在其父项中…

指定一个元素作为(Flexbox)灵活框

准备一个html文件:文件链接: flexbox0.html.
在这个html文件中,首先,我们需要选择将哪些元素布置为灵活的框。 为此,我们在要影响的元素的父元素上设置一个特殊的display值。 在这种情况下,我们想布置<article>元素,因此我们在<section>上进行设置:section { display: flex; }.这将导致<section>元素成为flex容器,其子元素成为flex项目。

简简单单的添加一个属性就实现了等宽的效果,而且高度一致,高度根据最高的一个内容块决定,真的令人惊喜呢!

在这里插入图片描述

明确地说,让我们重申一下这里发生的事情。 就其与页面其余部分的交互方式而言,我们将flex的显示值赋予的元素的作用类似于块级元素,但其子元素被布置为flex项。 还请注意,如果希望将元素的子元素布置为flex项,但该元素的行为类似于inline元素,则可以使用inline-flex的显示值。

弹性模型

弹性盒子里面的弹性元素项目沿着两个方向布局,横向和纵向
在这里插入图片描述

  • 主轴的方向是弹性盒子排列的方向,比如横排的时候是从左到右的,如果是竖排的就是从上到下的,开始的起点叫做主轴起点,主轴的终点叫做主轴终点

  • 横轴是垂直于主轴的方向的,该轴的起点和终点称为十字起点十字终点

  • 被设置了display:flex的父元素(在我们的示例中为<section>)称之为flex容器

  • The items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example).(在弹性盒子里面的弹性元素被称为弹性元素)

设置弹性盒子的排列方向

flex-direction: column;.//将主轴按列的方向排列
flex-direction: row;.//将主轴按行的方向排列

Wrap避免弹性项目撑开弹性盒子

使用了Wrap后页面的布局就不会是硬布局,每一个弹性盒子就变成了完整包裹在弹性盒子里的内容,而不会溢出盒子,默认每个弹性盒子会占用弹性盒子的完整一行,紧接着设定弹性盒子的最小宽度后,页面就会自适应,等宽填充整个弹性盒子,当弹性盒子缩小后,弹性盒子会按照最小的宽度显示,当最小宽度显示填充满了当前的宽度,其余弹性盒子就会排列到下一行,这样的弹性布局方式灵活性比较大。非常方便快捷。

一旦横向排列的盒子太多就会按照弹性盒子的主轴方向无限延伸,这样的话,盒子不换行显示就会出现当缩小窗口的时候,横线排列的盒子缩小到最后仍然可能出现横向的滚动条,这个时候需要在弹性框父元素中设置flex-wrap:wrap然后页面就不会出现滚动条,紧接着可以设置弹性元素的最小宽度flex:200

wrap包装并设置弹性元素的最小宽度后跨行显示的效果:
在这里插入图片描述

设置弹性项目在弹性盒子中所占的比重

如下效果所示:第三个弹性项目所占的空间是其他的弹性盒子的两倍

通过设置弹性项目的flex属性来设计该弹性盒子在空间中所占的比重

 article {
            flex: 1; /*flex: 1;该弹性项目跟其他弹性项目所占的比重是一比一,都一样宽*/

        }

        article:nth-of-type(3) {
            /*该弹性项目和其他弹性项目相比所占的空间是其他的两倍*/
            flex: 2;
        }

在这里插入图片描述
注意:必须先设计每一个弹性项目的flex属性值为1,然后设计其中某个弹性项目的宽度是其他的倍数。

flex属性还可以同时指定弹性项目的最小值

        article {
            flex: 200px 1; /*flex: 1;该弹性项目跟其他弹性项目所占的比重是一比一,都一样宽*/


        }

        article:nth-of-type(3) {
            /*该弹性项目和其他弹性项目相比所占的空间是其他的两倍*/
            flex: 200px 2;

        }

这基本上表明:“将首先为每个弹性项目分配200px的可用空间。在此之后,其余的可用空间将根据比例单位进行分配。”

flexbox的真正价值可以从其灵活性/响应能力中看出-如果您调整浏览器窗口的大小或添加另一个弹性项目<article>元素,则布局仍可以正常工作。

弹性盒子中弹性项目的对齐方式

您还可以使用flexbox功能使弹性项沿主轴或交叉轴对齐

align-items控制弹性项目在横轴上的位置。

默认情况下,该值为拉伸,它将拉伸所有弹性项目以在横轴方向上填充父对象。 如果父对象在横轴方向上没有固定的宽度,则所有伸缩项目将与最长的伸缩项目一样长。

			/*align-items: center;*/
            /*弹性项目横轴居中对齐*/
            /*align-items: flex-start;*/
            /*弹性项目横轴起点对齐*/
            /*align-items: flex-end;*/
            /*弹性项目横轴终点对齐*/
            align-items: stretch;
            /*弹性项目拉伸对齐*/

通过将align-self属性应用于单个弹性项目,可以覆盖它们的align-items行为。

        button:first-child {
            align-self: flex-end;
        }

        button:nth-of-type(3) {
            align-self: flex-start;
        }

        button:nth-of-type(5) {
            align-self: flex-end;
        }

在这里插入图片描述

justify-content控制弹性项目在主轴上的位置。

默认值为flex-start,它使所有项目都位于主轴的起点:justify-content: flex-start;
在这里插入图片描述
您可以使用flex-end使它们位于末端

在这里插入图片描述

水平分散居中:justify-content: space-around;.
在这里插入图片描述

水平等间距居中:justify-content: space-evenly;.
在这里插入图片描述
水平两边对齐居中:justify-content: space-between;.
在这里插入图片描述
center也是justify-content的值,它将使flex项位于主轴的中心

在这里插入图片描述

这些效果!!!弹性盒子的功能真是他妈的强大到令人叹为观止!!!

FlexBox更改布局顺序

Flexbox还具有更改弹性项目的布局顺序而不影响源顺序的功能。 这是传统布局方法无法完成的另一件事。

        button:first-child {
            /*align-self: flex-end;*/
            order: 1;
        }

        button:nth-of-type(3) {
            /*align-self: flex-start;*/
            order: -1;
        }

在这里插入图片描述

嵌套弹性盒子FlexBox

可以使用flexbox创建一些非常复杂的布局。 将flex项也设置为flex容器是完全可以的,这样它的子项也可以像柔性盒子一样放置

示例:

在这里插入图片描述

上面的示例的HTML非常简单。 我们有一个包含三个<article><section>元素。 第三<article>包含三个<div>。 :

在这里插入图片描述

首先,我们将<section>的子级设置为灵活的弹性项目。所以在最外层的弹性框——section元素中设置display:flex
flex: 1 auto;.这个效果很牛逼,很常用!!!如下:
当调整窗口大小的时候,每个弹性项目都是等宽,然后并且会自动铺满整个可用宽度
在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值