今天教你CSS-Flex布局,web前端开发零基础

21 阅读3分钟

2.2 flex-wrap 属性

根据中文意思来判断,这个东西应该是控制换行的。

.faBox{ flex-wrap: nowrap | wrap | wrap-reverse; }

2.3 flex-flow 属性

该属性是 flex-wrap 和 flex-direction 的简写方式。

.faBox{ flex-flow: || ; }

2.4 justify-content 属性

该属性负责主轴的对齐方式。

.faBox{ justify-content: flex-start | flex-end | center | space-between | space-around; }

2.4 align-items 属性

该属性负责交叉轴的对齐方式(垂直居中靠它来实现,很容易,面试常考题)。

2.5 align-content 属性

设置多根主轴时候的对齐方式,如果只有一条轴线,不起作用。

.faBox{ align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

3.项目属性

3.1 order 属性

order 英文意思秩序,该属性可以设置项目的排列顺序,从小到大。

.sonBox1{ order: ; }

3.2 flex-grow 属性

定义项目的放大比例,默认 0 ,不参与放大。

.sonBox1{ flex-grow: ; /* default 0 */ }

3.3 flex-shrink 属性

定义项目缩放。

.sonBox1{ flex-shrink: ; /* default 1 */ }

3.4 flex-basis 属性

属性定义了在分配多余空间之前,项目占据的主轴空间。

.sonBox1{ flex-shrink: ; /* default 1 */ }

3.5 flex 属性(推荐)

flex-grow,flex-shrink 和 flex-basis 的简写。 .sonBox1{ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

3.6 align-self 属性

可给子元素设置单独的对齐方式。 auto 的时候是继承父元素的 align-item

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

最后

面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。

96道前端面试题:

常用算法面试题:

前端基础面试题: 内容主要包括HTML,CSS,JavaScript,浏览器,性能优化