当前的位置:首页首页 > 资源分享 > 前端资源
前端Flex布局直接使用,值得收藏的干货
日期:2020-02-13 21:41:23 来源:pc小白 作者:pc小白 次浏览
分享:

摘要:W3C在2009年提出了一种新的布局方案:Flex 布局。Flex布局可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项属性。

  背景

  W3C在2009年提出了一种新的布局方案:Flex 布局。Flex布局可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项属性。

前端Flex布局直接使用,值得收藏的干货

  浏览器支持情况

  但对于新手来讲,盒模型或布局基础掌握不牢,会认为flex布局属性及其对应的取值太多,很难记住。为此小郭特意整理了一份前端最常用的flex布局方式,直接使用,不需要测试所有属性的作用。

  废话不多说,直接上干货。

  常用布局

  默认:Flex 布局默认就是首行左对齐

  一、行内或列内布局

  行内居中对齐

  .box {  display: flex;      justify-content: center; // 实现左、右对齐   align-items: center; // 实现垂直方向对齐 }

  行内两端对齐

  .box{  display:flex;       justify-content:space-between;   //align-items: center; 实现垂直方向对齐 }

  行内与起始位置或结尾位置对齐

  .box{  display:flex;   justify-content:flex-start; // 与起始位置对齐    //justify-content: flex-end; // 与结束位置对齐   //align-items: center; 实现垂直方向对齐 }

  列内两端对齐

  .box {  display: flex;          flex-direction: column;  // 改变主轴线     justify-content: space-between;    // align-items: center;实现垂直方向对齐 }

  行内均匀分布

  .box {   display: flex;    justify-content: space-around; // 均匀分布      // align-items: center;实现垂直方向对齐 }

  二、超出折行

  具体一行内含有多少元素,需要根据宽度设置来决定,超出部分换行

  .box{  display:flex;   flex-wrap:wrap;   }

  附注:补充部分以上未提及的属性及子项属性

  align-content:该属性只作用于多行的情况下,用于多行的对齐方式

  align-self:用来单独指定某Flex子项的对齐方式

注:本站所转载文章,目的在于帮助更多的人学习交流,不代表本站观点,如有侵权可联系管理员删除。但对于本站原创文章,转载需注明出处和链接。更多有关电脑、手机、平面/前端设计、建站知识和技巧,欢迎搜索关注微信公众号:“PC电脑小白”。
本文链接:https://pcxiaobai.com/resource/frontresource/20200213/899.html