css3 flex弹性盒子布局

css3 flex弹性盒子布局

什么是flex

  • Flex是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3
    引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。
  • 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table
    布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:
  • flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。也就是说当某个div使用了flex后,div也就成为了flex容器。

说了这么多 那应该怎么用呢
先将容器(DIV)设为弹性容器:display: flex;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flex-box{
            display: flex;
        }
    </style>
</head>
<body>
<div class="flex-box"></div>
</body>

为容器添加排列方向属性:flex-direction: row | row-reverse | column | column-reverse;

1、flex-direction,顾名思义,direction就是方向的意思。使用flex后,容器默认会有两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

ps:我个人理解是X轴和Y轴,这样方便自己记忆,下面就使用X(水平轴)和Y(交叉轴)来说明。

首先row就是默认的左对齐,紧接着的row-reverse就是反向了,也就是右对齐。然后column就是纵对齐了,最后一个属性也是反向了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
row(默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column:主轴为垂直方向,起点在上沿。

column-reverse:主轴为垂直方向,起点在下沿。

注:不需要此属性可以不加!

2、flex-wrap,css中看到wrap都跟行有关,那么其实也就是换不换行了,属性值默认是不换行,也就是nowrap。设置flex-wrap:wrap就是换行了。

flex-wrap:wrap-reverse就不用再说了吧,就是反过来,wrap换行开始是第一行在上,reverse就是最后一行在上面了。

3、flex-flow该属性可以将刚才上面的两个属性串联起来,例如flex-flow:row-rever wrap。比较简单就不写那么详细了

4、justify-content,很明显就是容器内容的对齐属性了。不过在内容对齐时,得先看flex-direction的值是关于哪条轴对齐了。

flex-start:在主轴上由左或者上开始排列;

flex-end:在主轴上由右或者下开始排列;

center:在主轴上居中排列 ;

space-between:在主轴上左右两端或者上下两端开始排列

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    在这里插入图片描述
space-between值就是两边对齐后,剩下的空间平均分配,space-around其实也就是每个子项都有着相同的margin-left和margin-right。

5、align-items,该属性有5个值: flex-start ,flex-end , center , baseline , stretch。

很容易与下面记录的第6个属性align-content混淆,先来简单的区分一下:align-content是使用时是针对于多行内容下,而align-items是单行或者多行内容都可以使用,这样一分就清晰很多了。现在来看一下几个属性值的demo图
在这里插入图片描述
6、align-content,该属性有5个值: flex-start ,flex-end , center , space-between,space-around, stretch。详情看下面demo图
在这里插入图片描述
1、order ,设置order属性也跟排序有关,order翻译过来就是“顺序”,那么在子项中,设置了order后改变它的值即可改变子项在排列中的顺序,值越小那么越靠前,相反,值越大越靠后,看下面demo图
在这里插入图片描述
2、flex-grow ,grow英文翻译过来就是发展、生长的意思,也可以理解为缩放,ok,既然是知道是缩放了那么理解起来就容易多了。flex-grow的值是number,默认值是0,就是说即使父容器存在剩余空间老子也不要,那么如果子项

都设置了1,即是每个人平分他爸的家产,等比例平分。如果值不一样,比如1、1、2、1,那么值是2的那一项就会比1的那一项多一倍的位置,直接看demo图吧
在这里插入图片描述
3、flex-shrink ,该属性是当父容器空间不足,子项内容超出容器时,子项进行缩放,但是是在父元素不设置flex-wrap换行的情况下。默认值是0,也就是不进行缩放,占原来元素内容宽度大小。值越大那么缩小的就越大。看一下下面的demo图
在这里插入图片描述
4、flex-basis ,该属性可以为某个子项定义宽度,比如我开始就要300px宽度,那么flex-basis:300px;然后父容器再根据自身宽度减去300px后再分配其他子项的宽度,默认值是auto,子项设置了宽度则占据空间就是宽度,没有设置就是占据自身的内容宽度。

当一个父容器宽度是400,有5个子项,每个宽度是50px,其中一个flex-basis设置的值是200px;那么就是刚好占满父容器,当宽度总和超出父容器宽度时,没有设置flex-wrap换行的话便会等比例进行缩小。

5、flex ,该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。该属性有两个快捷值auto和none,构建项目的时候可以优先使用auto,因为如果独立赋值的话浏览器会去推算相关比例,存在误差。

flex默认值 == flex:0 1 auto;

flex:none == flex:0 0 auto;

flex:auto == flex:1 1 auto;
  
6、align-self ,和上面父容器的align-items是类似的属性,他可以为某个子项定义不一样的排列方式,也就是可以覆盖父容器的aligh-items的属性,看一下demo图
在这里插入图片描述
  父容器设置了align-items:flex-start,然后子项3号设置了align-self:flex-end,那么他自身的对齐排列也就出现区别了,该属性其他属性跟align-items差不多。

什么情况下不建议使用 Flexbox ? 虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox
布局:

1、整体页面布局

2、完全支持旧浏览器的网站

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3弹性盒子布局Flexbox)是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性: 1. 弹性容器(Flex Container):使用`display: flex;`或`display: inline-flex;`来定义容器为弹性容器。弹性容器的子元素将根据容器的规则进行布局。 2. 弹性项目(Flex Item):弹性容器中的子元素被称为弹性项目。可以使用`flex`属性来控制弹性项目在容器中的分布。例如,`flex: 1;`将使项目占据可用空间的比例为1。 3. 主轴(Main Axis)和交叉轴(Cross Axis):弹性容器具有主轴和交叉轴,它们决定了项目在容器内的布局方向。默认情况下,主轴是水平方向,交叉轴是垂直方向。 4. 弹性盒子属性: - `flex-direction`:指定主轴的方向(row、row-reverse、column、column-reverse)。 - `justify-content`:控制弹性项目在主轴上的对齐方式(flex-start、flex-end、center、space-between、space-around)。 - `align-items`:控制弹性项目在交叉轴上的对齐方式(flex-start、flex-end、center、baseline、stretch)。 - `align-self`:控制单个弹性项目在交叉轴上的对齐方式。可以覆盖`align-items`的设置。 - `flex-wrap`:指定是否换行(nowrap、wrap、wrap-reverse)。 - `flex-flow`:`flex-direction`和`flex-wrap`的简写形式。 - `align-content`:控制多行弹性项目在交叉轴上的对齐方式(flex-start、flex-end、center、space-between、space-around、stretch)。 CSS3弹性盒子布局非常灵活,并且可以适应不同屏幕大小和设备。它被广泛应用于响应式网站设计和移动应用程序的开发中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值