弹性布局方式flex
程序员文章站
2024-01-29 19:37:04
...
display:flex 布局方式总结
弹性布局方式深受程序员的喜爱,各大框架也非常的喜欢它,可是记忆模糊不清,就会给自己自我欺骗的机会。因此这篇文章帮助你牢记它。
首先我们需要安排上的代码是:{dispay:flex}
第二我们就要开始我们想要的方式去书写代码了在此之前我们需要了解一下有关f的几个标签和标签属性。
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
-
justify-content: flex-start | flex-end | center | space-between | space-around;
定义了在主轴上的对齐方式。(左对齐,右对齐,居中,两端对齐,两侧间隔相等) -
align-items: flex-start | flex-end | center | baseline | stretch;
定义项目在交叉轴上如何对齐(交叉轴的起点对齐,交叉轴的终点对齐,交叉轴的终点对齐,项目的第一行文字对齐) -
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
好了常用的就是这些了,点击查看参考文档
现在让我们来实现面试常考的水平垂直居中吧!
#app{
display: flex;
height: 100vh;
align-items: center;
justify-content:center;
flex-direction: column;
}
记住属性和标签,然后就没有问题啦,学习一定要坚持下去喔!
上一篇: laravel 子域名划分模块
下一篇: CSS预编译器
推荐阅读
-
弹性布局方式flex
-
CSS3 弹性布局弹性流(flex-flow)属性详解和实例_html/css_WEB-ITnose
-
多列等宽高度不固定的几种css布局(文档流、浮动、瀑布流、flex、flexbox)
-
CSS等高布局的6种方式_html/css_WEB-ITnose
-
CSS3 中弹性盒布局_html/css_WEB-ITnose
-
css 中的position定位和flex布局分析
-
双飞翼布局、圣杯布局、定位方法布局、flex布局(三栏布局的多种实现方式)--html基本知识(学习笔记)
-
实现CSS等分布局的4种方式_html/css_WEB-ITnose
-
CSS等高布局的6种方式_html/css_WEB-ITnose
-
360发布来店通:布局O2O 用户以通话方式即可默认关注商家