flex布局

Drinkey 发布于2019-08-30 15:55 / 1656人阅读

摘要：布局也叫弹性盒子，是由提出的一种新的布局方式，目前兼容以上的浏览器，任何一个盒子包括行内元素都可以指定为布局，只需要在它的父元素设置即可注意，在设置了布局以后，其所有的子元素的，和属性都将失效父元素设置后，会成为容器，它的所有子元素默认称

flex布局也叫弹性盒子，是由W3C提出的一种新的布局方式，目前兼容IE10+以上的浏览器，任何一个盒子包括行内元素都可以指定为Flex布局，只需要在它的父元素设置display:flex;即可

.box{
  display:flex;
}

注意，在设置了flex布局以后，其所有的子元素的float，clear和vertical- align属性都将失效

父元素设置flex后，会成为flex容器（box），它的所有子元素默认称为容器成员（item），容器默认存在两根轴线，水平的主轴线和垂直的交叉轴线

在父元素（box）设置flex后，会有6个属性

box

flex- direction

flex-wrap

flex-flow

justify- content

align-items

align-content

下面我们来依次分析这几个属性

fiex-direction

该属性决定主轴的方向，也就是项目的排列方向，它有4个参数，主轴方向改变后交叉轴的方向也会改变

flex-direction:row;这个是默认值，默认主轴为水平方向，起点在左端

flex-direction:row-reverse;主轴为水平方向，起点在右端

flex-direction:column;主轴在垂直方向，起点在上端

fiex-direction:column-reverse;主轴在垂直方向，起点在下端

flex-wrap

该属性决定子元素如果不在一条轴线上如何换行

nowrap:该属性是默认属性，不换行，如果我们设定的item大小在一行上回超出box，那么不会溢出也不会换行，而是item会变形，从而适配当前box

wrap:正常换行，在第一行正下方

wrap-reverse:在第一行正上方换行，第一行会默认从底部开始

flex-flow

该属性是flex-direction和flex-wrap属性的简写，默认值是row nowrap;

.box{
  display:flex;
  flex-flow:row nowrap;
}

justify-content

该属性定义了项目在主轴上的对齐方式

flex-start：该属性是默认值，从左端对齐

flex-end：该属性规定从右端对齐

center：该属性规定居中对齐

space- between：该属性规定两端对齐，子元素之间的间隔都相等

space- around：该属性规定每个子元素的两侧的间隔相等，所以子元素之间的间隔比子元素与边框之间的间隔大一倍

align-items

该属性定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline：子元素的第一行文字的基线对齐

stretch：默认值，如果子元素未设置高度或auto，将占满整个父容器的高度

align-content

定义了多根轴线的对齐方式，如果父元素只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

cengter：与交叉轴的中点对齐

space- between：与交叉轴的两端对齐，轴线之间的间隔平均分布

space-around：每跟轴线之间的距离相等所以轴线之间的间隔比与边框线之间的间隔大一倍

st retch：默认值，轴线占满整个交叉线

item

在父元素设置了flex属性后，子元素会有以下6个属性

order

flex-grow

flex-shrink

flex- basis

flex

aligr-self

以下面的代码为例，我们来依次了解这些属性

order

该属性定义项目的排列顺序，数值越小，排列越靠前，默认为0

div span:nth-of-type(2) {
    order: 1;
}

div span:nth-of-type(1) {
    order: 2;
}

flex-grow

该属性定义项目的放大比例，默认为0，即使存在剩余空间，也不放大，如果所有子元素都设置该属性为1，那么他们将会等分剩余的空间，如果一个其中一个子元素的flex-grow属性设置为2，那么它将会比其他的子元素多一倍

div span:nth-of-type(1) {
            flex-grow: 2;
        }

flex-shrink

该属性定义了项目的缩小比例，默认为1，也就是说，如果空间不足，该项目将会缩小，如果所有项目的缩小比例都为1，那么如果空间不足，所有项目都将会等比例缩小，如果其中一个设置为0，那么在空间不足的情况下，其它项目会缩小，该项目不会缩小，该属性设置负值无效

flex- basis

属性定义在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，它的默认值为auto，即项目本来的大小，该属性可以设置和width或length属性一样的值，那么项目将占据固定的空间

flex

该属性是flex- grow，flex-shrink和flex- basis的简写，默认值为0 1 auto，后两个属性可选

align-self

该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性，默认值为auto，表示继承父元素的 align-items属性，如果没有父元素，那么等同于stretch，该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117367.html

CSS6：flex布局

摘要：主要用来做横向的布局。元素的布局学习我分成两个部分，第一个部分是元素布局。以下几个属性影响着元素的布局。详细还是看分钟彻底弄懂布局讲的非常明白。的时候，伸缩时需要考虑，按照进行等比例伸缩。布局套路学习布局教程实例篇前言：这是我看过最好的flex布局教程：30分钟彻底弄懂flex布局传统的布局方法与flex属性通览 showImg(https://segmentfault.com/i...

Jioby 2019-08-29 17:09 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

xuhong 2019-08-28 18:31 评论0 收藏0
结合CSS3的布局新特征谈谈常见布局方法

摘要：案例图片来自腾讯年的一道前段笔试题，有兴趣的同学可以去看一下。腾讯前端面试稿布局布局指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。写在前面最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。常见的页面布局在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一...

cnTomato 2019-08-01 15:01 评论0 收藏0
几种常见布局的flex写法

摘要：几种常见布局的写法首先要对父元素设置布局方式，同时在本案例中，利用媒体查询，当屏幕分辨率小于的时候，布局变成纵向排列。两列布局定宽是的简写方式。 flex布局目前基本上兼容主流的浏览器，且实现方式简单。我整理了flex的一些知识点，并且总结归纳了几种常见布局的flex写法 flex基础知识点 flex-grow和flex-shrink相关计算公式公式1：子元素空间 < 父容器父...

fish 2019-08-01 17:08 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0