初探flex布局

Jeffrrey 发布于2019-08-29 12:48 / 1322人阅读

摘要：一布局概述布局是一种较新盒子模型，在布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。

一 flex布局 1.1 flex概述

flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。也可以比较灵活的处于容器的的某一位置上。所以flex的应用场景很多，比如我们碰到需要元素居中的应用场景时，flex布局就变得很有用了。更多关于flex的说明请看这里。

二项目示例 2.1 项目概述

最近自己在写一个todolist的项目，其中左侧导航栏就大量应用到了flex布局，这里就以这个为例，讲一讲flex布局的一些基本概念。

我们在日常开发中，肯定也经常会碰到这种需求，在一行中，不同的标签元素要水平垂直居中，且一个居左，一个居有，且标签元素内的元素还要水平垂直居中。水平居中有时候到还好解决，垂直居中可能就难了。下面我们来看用flex布局怎么解决这些问题。
先来看html部分

我们想让类名为list-today-title的div和类名为list-today-count的div在同一行显示，并且让他两都在list-today的父容器里垂直水平居中。另外span.list-icon和span.list-name要在div.list-today.title中水平垂直居中。并且同行排列。
完整的css样式如下(这里使用了scss)

    div.list-today{
        margin-bottom: 10px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
         div.list-today-title{
           flex-grow: 10;
           display: flex;
           height: 40px;
           align-items: center;
           span.list-icon {
             width: 24px;
             height: 24px;
             i{
               font-size: 0;
             }
           }
           span.list-name {
             margin-left:10px;
           }
         }
        div.list-today-count{
          flex-grow: 1;
          display: flex;
          align-items: center;
        }
      }

2.2 flex

下面我们来分析一下上述的css。首先我们要先让list-today-title和list-today-count实现水平和垂直居中。

div.list-today{
 display:flex;
 flex-direction: row;
 justify-content: flex-start;
 align-items: center;
 div.list-today-title{
  flex-grow:10
 }
 div.list-today-count{
  flex-grow:1 
 }
}

说明:
(1)display:flex : 使该元素成为flex容器，里面的子元素可以应用各种flex功能。
(2)flex-direction: 定义主轴的方向
(3)justify-content:子元素在主轴方向的排布方式，这里的值是flex-start，表示从头开始排布。
(4)align-items:子元素在侧轴方向的排布方式，这里的值是center，表示子元素在侧轴上居中。这里可以用来做垂直居中。
（5）flex-grow:表示当父容器空间有多余的时候，子元素会拉伸的比例。
一图胜千言，看过这张图你就明白了。

2.3 总结

flex布局是一种比较新的布局方式，能很好的解决一些传统布局中不好解决的问题，如子元素的垂直居中等。所以学会使用flex布局是非常有必要的。想详细了解flex布局请点击这里。

GPU云服务器云服务器 flex布局初探webrtc webrtc技术初探初探腾讯云存储网关

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112161.html

初探uni-app框架踩坑

摘要：近些天有接触到框架，使用软件进行编译，能生成多端项目文件，如微信百度支付宝小程序及和端，记录遇到的问题条件编译我觉得比较突出的一点功能，就是这个条件编译，指定对应的代码执行在对应的一端仅在某平台存在除了某平台均存在如只在微信小程序中才执行近些天有接触到uni-app框架，使用HBuilderX软件进行编译，能生成多端项目文件，如微信、百度、支付宝小程序及Android和ios端，记录...

neu 2019-08-26 10:15 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

ACb0y 2019-08-21 11:49 评论0 收藏0
面试分享：一年经验初探阿里巴巴前端社招

摘要：三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己...

wuyumin 2019-08-29 13:07 评论0 收藏0
阿里云前端周刊 - 第 31 期

摘要：发布按照官方发布计划，的发布意味着进入阶段，彻底退出舞台，的还有半年结束。为了应对这个挑战，美团点评境外度假前端研发团队自年月起启动了面向端用户的赫尔墨斯项目。前端技术越来越复杂，有不低的技术门槛。推荐 1. 利用 Dawn 工程化工具实践 MobX 数据流管理方案 https://zhuanlan.zhihu.com/p/... 项目在最初应用 MobX 时，对较为复杂的多人协作项...

madthumb 2019-08-21 17:27 评论0 收藏0