前端面试题HTML+CSS基础篇——flex布局

Flex弹性布局

1. 什么是flex布局

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。
目前被所有浏览器所支持。

前端面试题HTML+CSS基础篇——flex布局_第1张图片

2. 如何设置flex布局

块级元素: .box{ display:flex; }
行内元素也可以设置成flex布局: .box{ display:inline-flex; }

**设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

3. flex的几种常见属性

(1) flex-direction

用于指定Flex主轴的方向,继而决定了Flex子项在Flex容器中的位置
有如下四个取值:

  • row:默认值,表示Flex子项水平方向从左到右进行排列,此时水平方向上轴线为主轴方向
  • row-reverse:与row相反,水平方向轴线为主轴方向,Flex子项排列为从右向左进行排列
  • column:表示Flex子项垂直方向上从上到下进行排列,此时垂直方向上轴线为主轴方向
  • column-reverse:与column相反,垂直方向轴线为主轴方向,Flex子项排列为从下到上进行排列
    前端面试题HTML+CSS基础篇——flex布局_第2张图片

(2) justify-content

用于指定Flex子项在主轴方向上的对齐方式
有如下五个取值:

  • flex-start:默认值,表示Flex子项与行的起始位置对齐
    前端面试题HTML+CSS基础篇——flex布局_第3张图片

  • flex-end:表示flex子项与行的结束位置对齐
    前端面试题HTML+CSS基础篇——flex布局_第4张图片

  • center:表示Flex子项与行中间对齐
    前端面试题HTML+CSS基础篇——flex布局_第5张图片

  • space-between:表示两端对齐,中间间距相等
    前端面试题HTML+CSS基础篇——flex布局_第6张图片

  • space-around:表示间距相等,中间间距是两端间距的二倍
    前端面试题HTML+CSS基础篇——flex布局_第7张图片

(3) align-items

用于指定侧轴上Flex子项的对齐方式
有如下五个取值:

  • stretch:默认值,当Flex子项未设置高度或者高度值为auto的时候,stretch起作用,将Flex子项的高度设置为行高度(将占满整个容器的高度)
    前端面试题HTML+CSS基础篇——flex布局_第8张图片

  • flex-start:表示与侧轴开始位置对齐
    前端面试题HTML+CSS基础篇——flex布局_第9张图片

  • flex-end:表示与侧轴结束位置对齐
    前端面试题HTML+CSS基础篇——flex布局_第10张图片

  • center:表示侧轴方式上中间对齐
    前端面试题HTML+CSS基础篇——flex布局_第11张图片

  • baseline:表示基线对齐,项目的第一行文字的基线对齐
    前端面试题HTML+CSS基础篇——flex布局_第12张图片

(4) flex-wrap

用于指定Flex子项是否换行
有如下三个值:

  • nowrap:默认值,不换行,Flex子项可能会溢出
    前端面试题HTML+CSS基础篇——flex布局_第13张图片

  • wrap:换行,溢出的Flex子项会自动放到下一行
    前端面试题HTML+CSS基础篇——flex布局_第14张图片

  • wrap-reverse:表示反方向换行
    前端面试题HTML+CSS基础篇——flex布局_第15张图片

(5) align-content

该属性用于多行情况下,用于多行的对齐方式
align-content:stretch(默认值)| flex-start | flex-end | center | space-between | space-around

(6) align-self

该属性用于单独指定某Flex子项的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

(7) flex复合属性

该属性用来指定Flex子项如何分配空间

<ul>
    <li style="flex:1;">1111li>
	<li style="flex:1;">2222li>
	<li style="flex:1;">3333li>
ul>

则三个li将按照1:1:1的比例来分配父元素ul的空间
flex为一个复合属性,它是由flex-grow、flex-shrink、flex-basis三个值组成的

  • flex-grow:用于弹性盒子的扩展比率,默认值为0
  • flex-shrink:指定了Flex元素的收缩规则,flex元素仅在默认宽度之和大于容器的时候才会发生收缩
  • flex-basis:用于设置或检索弹性盒子的伸缩基准值

除了我列举出来的这几个属性,还有一些其他属性,但我认为比较重要的就是flex-direction/justify-content/align-items/flex-wrap/flex复合属性等这几个,面试过程中只要说出来这几个,并且把其具体的值描述出来就很OK了,面试官也不会太为难你,哈哈哈哈哈哈哈哈

其中Flex布局常用在设置盒子垂直水平居中,这也是常考的一个内容,直接在父元素上面设置display:flex; justify-content:center; align-items:center; 就OK啦! 所以Flex布局真的是一个非常有用的内容!

下一节在重点整理一下盒子水平垂直居中吧!

你可能感兴趣的:(前端面经,html,flex,css,面试)