来了老弟,Flex弹性布局(常用)

我们在编写页面的时候,页面的布局方面是非常重要的。

比如说你想要你写的页面它能随着浏览器的大小改变从而改变(也可以说是适应),要做到这样的话一个好布局是主要的一方面。

下面我要跟大家分享的就是一个布局的写法(Flexible Box),我们称之flex弹性布局(于2009年W3C提出的),从名字上我们顾名思义就应该能看出这个布局是具有弹性的咯!
好了,下面就开始深入了解下了

任何元素都可以用上这个布局

.box{
display:flex; //这是一个基本的写法
}
.box{
display:inline-flex; //这是一个行内元素写法
} 

哦对了,设置flex布局之后该元素的子元素的那些居中与浮动之类就会无效了!

下面我们就把设置弹性布局的元素称之为一个容器了!(之前学的时候貌似就是这样叫的)
这个容器总共有六个属性可以用来给该容器当值(用来布局的)

  1. flex-direction //该属性决定你编写在页面上的那些元素的排列方向,这个属性它带有四个值来(看下图)
    在这里插入图片描述

上图忘了一点(就是的话该属性的默认值是row,就是说在你不给它赋值就默认是row)

  1. flex-wrap //该属性的作用呢就是给容器设置如何换行的,有着3个值(具体看下图)
    在这里插入图片描述
  2. flex-flow //而这个属性呢是前面两个属性加起来的意思,所以另外两个的值这个都是能用的,也有两个值拼起来的(比如这个属性的默认值row nowrap,这个代表着是从左边水平方向排列的,并且不换行)
  3. justify-content //这个属性呢是用来设置对齐方式的(如居中、靠左、靠右···)看下图
    在这里插入图片描述

下面两个因小编不太常用到,所以也就没那么熟悉的说(就直接从别处搬一下了哈)
5. align-items //这个属性定义项目在交叉轴上如何对齐,它有5个值(看下方)

       stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
         flex-start:交叉轴的起点对齐。
            flex-end:交叉轴的终点对齐。
              center:交叉轴的中点对齐。
                baseline: 项目的第一行文字的基线对齐。
  1. aligns-cont //该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。它有6个值(看下方)

        tretch(默认值):轴线占满整个交叉轴。
         flex-start:与交叉轴的起点对齐。
          flex-end:与交叉轴的终点对齐
           center:与交叉轴的中点对齐。
            space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
             space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
    

上面就是这个布局常用的一些属性和值,还有一些就不全部写了哈!
(主要是小编不太熟后面的)
还有效果的哈自行体验

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值