[面试专题]Flex 布局

Profeel 发布于2019-08-01 17:30 / 664人阅读

摘要：布局标签空格分隔是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为布局。如果项目只有一根轴线，该属性不起作用。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。

Flex 布局

标签（空格分隔）： flex css

Flex:

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。容器分为两种,块flex和行内flex.

.box{
  display:flex;/*webkit需要加前缀*/
  /*display:inline-flex;*/
}

Flex布局有两层,采用flex布局的元素称为flex容器,其子元素则自动成flex item,即项目.
注:flex不同于block,flex容器的子元素的float,clear,vertical-align属性将失效.

Flex布局:

flex容器有两根轴:水平主轴就是x轴(main axis)和竖直轴也是y轴(cross axis),两轴相关位置标识如下:

flex容器属性:

flex-direction:决定项目的排列方向。

flex-wrap:即一条轴线排不下时如何换行。

flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content:定义了项目在主轴上的对齐方式。(justify)

align-items:定义项目在交叉轴上如何对齐。

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。(换行会产生多轴)

Flex item属性:

order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow:定义项目的放大比例,如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink:定义了项目的缩小比例，默认为1，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）。

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

align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

云服务器 GPU云服务器 flex布局专题页专题系列活动专题页

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

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

[面试专题]Flex 布局

摘要：布局标签空格分隔是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为布局。如果项目只有一根轴线，该属性不起作用。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。 Flex 布局标签（空格分隔）： flex css Flex: Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex...

cheukyin 2019-08-20 19:00 评论0 收藏0
[面试专题]Flex 布局

摘要：布局标签空格分隔是的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为布局。如果项目只有一根轴线，该属性不起作用。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。 Flex 布局标签（空格分隔）： flex css Flex: Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex...

nemo 2019-08-29 13:16 评论0 收藏0
前端硬核面试专题之 CSS 55 问

摘要：前言本文讲解道前端面试的的内容。文章原文地址前端硬核面试专题之问。前端硬核面试专题的完整版在此前端硬核面试专题，包含数据结构与算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文讲解 55 道前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章...

崔晓明 2019-08-30 15:44 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0