关于CSS3 flex布局，这样简单做就好了。

RyanHoo 发布于2019-08-30 15:54 / 2228人阅读

摘要：布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝为例。看了网上很多关于布局，有些写得太乱了，也太复杂了。那么用布局，就是这样布局上面给每个用划分，一共分份，占，那就是占，那就是这个容易理解吧。

flex布局在移动端会用得比较广泛，例如导航栏，菜单栏等，以支付宝，淘宝APP为例。

看了网上很多关于flex布局，有些写得太乱了，也太复杂了。

写一个导航栏，5个导航，用普通得写法是。

就没每个

按照20%平均分，左浮动即可。这种方法是可以实现得，但后面再增加

，例如7个

，那么是下面这样的。

很明显父级元素放不下了，只能被挤下去了。

那么，用flex布局怎么做呢？有何优点？

效果是和上面一样的

但是当我新增7-10个，都不会被挤下去，而是直接在父级元素上面进行排列并重新划分宽度。

如果要加一个margin-right呢？这个也容易啊，但是最后一个

不贴边，我们要给最后一个

多带带加一个style。

下面再说一个不均等的。

如上图，有三个

，每个

都是不均等的，在父级元素用普通的方法就是给不同的百分比。那么用flex布局，就是这样：




    Flex布局
    
    



1
2
3

上面给每个

用flex划分，一共分6份，li_1占1/6，那就是flex:1;li_2占2/6，那就是flex:2;这个容易理解吧。

下面接着说水平排列方式：

在父级元素使用justify-content

justify-content：space-around;/*左右平均分布*/
justify-content：center;/*居中*/
justify-content：space-between;/*两端分布*/
justify-content：flex-start;/*居左*/
justify-content：flex-end;/*居右*/

Author：TANKING
学习交流微信：face6009
web：http://likeyunba.com

云服务器 GPU云服务器就好了 flex布局 html简单布局网站部署好了云服务器如何

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

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

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个仓库，欢迎大家仅居中元素定宽高适划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 showImg(https://segmentfault.com/im...

YuboonaZhang 2019-08-29 16:45 评论0 收藏0
CSS实现水平垂直居中的1010种方式（史上最全）

摘要：划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个仓库，欢迎大家仅居中元素定宽高适划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了 showImg(https://segmentfault.com/im...

OnlyLing 2019-08-23 11:58 评论0 收藏0