首页 建站教程 WEB前端 正文

简单分享css之flex布局快速入门

随着流量像移动端的偏离,我手上的项目大多也都是移动端的为多,移动端无论是app还是小程序,或是一些移动端的框架都使用了flex的布局,这对于长期使用传统盒模型的前端人员一时可能不太习惯,特别是定义为flex布局之后的各种位置调整让人头疼不已,头疼归头疼既然这么多人在用,我们就还是有必要掌握一下,下面就言归正传。 flex布局其实就是两个概念要记住的,一...

随着流量向移动端的偏离,经常会碰到一些移动端项目。移动端,无论是app还是小程序,或者一些移动端框架,基本上都有使用flex布局,对于长期使用传统盒子模式的前端人员来说可能不太习惯,尤其是定义为flex布局的各种位置调整,更是让人头疼。既然这么多人都在用,我们还是有必要掌握的,让我们进入正题。

简单分享css之flex布局快速入门 移动端项目 flex布局 CSS  图1

flex布局简单的理解就是两个概念:一个是容器一个是元素

控制容器的属性有六个

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 设定主轴的方向,默认就是横向排列
flex-wrap
默认是不换行的,也就是会一直按你设置的主轴(flex-direction)排列,元素放不下了就会被压缩
flex-flow
是flex-direction和flex-wrap的简写,默认 row nowrap即横向排列不换行。
justify-content
内部元素在主轴上的对齐方式
align-items
定义元素在交叉轴上(和主轴垂直的方向)如何对齐。
align-content
定义了多轴线(大于等于2行)的对齐方式(把内部所有元素看作一个整体)。

容器的属性就是这六个,其实也就五个,简写记不记无所谓,需要搞清楚的就是主轴的概念以及容器(其实就是盒子),比如暂且可以理解为横向排列,需要垂直居中就用align-items,需要换行就用flex-wrap,需要内部元素都垂直就用align-content。
既然我们可以对外围的容器盒子操作,那当然也可以对里面具体的元素进行操作。

操作元素的属性同样有六个

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow
定义项目的放大比例,默认值为0,默认不会放大。
flex-shrink
定义了项目的缩小比例,默认为1,默认会缩小。
flex-basis
这个比较绕人,其实就是宽度或者高度(根据你的主轴)优先级高于width,height,设置了固定值就不会参与容器内剩余空间的分配
flex
属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
align-self
属性单独设置元素的对齐方式,比如横向排列align-items是居中我想让其中一个元素居下,那我就设置align-self:flex-end

关于css之flex布局就分享到这里,希望对大家能够有所帮助。

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/207.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2349
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 2203
发布评论

感谢您的支持