前言：

flex最常用的就是justify-content和align-items了，这里把这两个属性介绍下，大家更多关于flex布局可以查看阮一峰的日志，写的非常清楚！

阮一峰flex布局的日志：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1、justify-content（在父元素设置）
    设置弹性盒子元素在主轴（横轴）的对齐方式。

取值：

  • justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。

flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。

center：整体居中显示。

space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。

2、align-items, align-self 

设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。其中align-items属性用于弹性容器，而align-self用于弹性项目。

  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>flex布局justify-content属性</title>

    <style rel="text/stylesheet">

        .box {

            display: -webkit-flex;

            display: flex;

            width: 400px;

            height: 100px;

            margin: 0;

            padding: 0;

            border-radius: 5px;

            list-style: none;

            background-color: #eee;

        }

        .box li {

            margin: 5px;

            padding: 10px;

            border-radius: 5px;

            background: #aaa;

            text-align: center;

        }

        #box {

            -webkit-justify-content: flex-start;

            justify-content: flex-start;

        }

        #box2 {

            -webkit-justify-content: flex-end;

            justify-content: flex-end;

        }

        #box3 {

            -webkit-justify-content: center;

            justify-content: center;

        }

        #box4 {

            -webkit-justify-content: space-between;

            justify-content: space-between;

        }

        #box5 {

            -webkit-justify-content: space-around;

            justify-content: space-around;

        }

    </style>

</head>

<body>

    <h2>justify-content: flex-start</h2>

    <ul id="box" class="box">

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ul>

    <h2>justify-content: flex-end</h2>

    <ul id="box2" class="box">

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ul>

    <h2>justify-content: center</h2>

    <ul id="box3" class="box">

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ul>

    <h2>justify-content: space-between</h2>

    <ul id="box4" class="box">

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ul>

    <h2>justify-content: space-around</h2>

    <ul id="box5" class="box">

        <li>a</li>

        <li>b</li>

        <li>c</li>

    </ul>

</body>

</html>

3、flex的兼容性

　兼容性检测网址：www.caniuse.com

　 

  • 兼容IE10以上，但是要加前缀 -ms-
  • Edge全部支持
  • firfox 版本28以上，低版本要加 -moz-
  • chrome 21以上，低版本要加 -webkit-

微信小程序中经常使用flex布局非常方便：

弹性盒子布局：

1、 首先找到使用弹性盒子布局的容器元素view,首先将他变成一个flex

a)      display:flex;   //设置完后默认的每个元素都是从左往右放置的

　　　

b)     目标一：每个元素独占一行，自上而下放置

        flex-direction: column;

　　

c)      目标二：自上而下放置时在垂直方向上均匀分布；元素在垂直方向上间隔一致，而且第一个和最后一个元素离顶部和底部都有一定的间距；

       justify-content: space-around;

　　

　　

d)     目标三：元素在水平方向上居中

    align-items: center;

　　

弹性盒子布局优点：

.container {

  background-color: #eee;

  height: 100vh;

  // 下面是弹性盒子布局

  display: flex;

  flex-direction: column;  // 纵向排列

  justify-content: space-around;

  align-items: center;

// flex-wrap: wrap;  // 一行显示不了可以换行,用于pc端多个item排列时

}
  1. 就算下面再增加几个text，依然会自动垂直，水平居中
  2. 比较直观，只需要在容器中设置，一目了然
  3. 非常高效，灵活的应对页面结构的变化

　　

flex布局justify-content属性和align-items属性设置的更多相关文章

  1. 深入理解 flex 布局以及计算_Flexbox, Layout

    起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...

  2. FreeMusic项目优化（一）——flex布局学习记录

    参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...

  3. 浅析flex 布局

    Flex基本概念: 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end: ...

  4. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  5. 谈谈flex布局实现水平垂直居中

    我们在这要谈的是用flex布局来实现水平和垂直居中.随着移动互联网的发展,对于网页布局来说要求越来越高,而传统的布局方案对于实现特殊布局非常不方便,比如垂直居中.所以09年,W3C 提出了一种新的方案 ...

  6. Flex 项目属性：flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  7. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. Flex布局 Flexbox属性具体解释

    原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...

  9. Flex布局教程及属性速查

    一.Flex布局介绍 伸缩盒模型(flexbox)是一个新的盒子模型,意为"弹性布局",用来为盒状模型提供最大的灵活性,主要优化了UI布局.Flexbox的功能主要包手:简单使用一 ...

随机推荐

  1. redis 系列26 Cluster高可用 (1)

    一.概述 Redis集群提供了分布式数据库方案,集群通过分片来进行数据共享,并提供复制和故障转移功能.在大数据量方面的高可用方案,cluster集群比Sentinel有优势.但Redis集群并不支持处 ...

  2. RabbitMQ消息队列（十四）-启用SSL安全通讯

    如果RabbitMQ服务在内网中,只有内网的应用连接,我们认为这些连接都是安全的,但是个别情况我们需要让RabbitMQ对外提供服务.这种情况有两种解决方案: 在RabbitMQ外层在封装一层应用,应 ...

  3. 看看.NET Core几个Options的简单使用

    前言 配置,对我们的程序来说是十分重要的一部分.或多或少都会写一部分内容到配置文件中去. 由其是在配置中心(Apollo等)做起来之前,配置文件一定会是我们的首选. 在.NET Core中,习惯的是用 ...

  4. 如何热更新线上的Java服务器代码

    一.前言 1.热更新代码的场景 (1)当线上服务器出现问题时,有些时候现有的手段不足以发现问题所在,可能需要追加打印日志或者增加一些调试代码,如果我们去改代码重新部署,会破坏问题现场,可以通过热部署的 ...

  5. 第44章 添加新协议 - Identity Server 4 中文文档(v1.0.0)

    除了对OpenID Connect和OAuth 2.0的内置支持之外,IdentityServer4还允许添加对其他协议的支持. 您可以将这些附加协议端点添加为中间件或使用例如MVC控制器.在这两种情 ...

  6. .NET读取json数据并绑定到对象

    需要引用的命名空间: 读取的具体应用: this代表本实体(对象),通过PopulateObject,直接将读取到的json数据与对象进行绑定 Json保存的具体应用: 将对象保存为Json JObj ...

  7. MyCat做MySQL负载均衡（享学课堂，咕泡学院听课笔记）

    不要用战术上的勤奋,掩盖战略上的懒惰. 一.数据库集群演示 演示的数据库的表分了三种, 1.配置表,存储一些配置文件,其他业务表需要关联读取,每个数据库都存储配置表的全部内容,即操作Mycat,所有集 ...

  8. STM32-FreeRTOS快速学习之总结1

    1. 基础知识注意:在RTOS中是优先值越高则优先级越高(和ucos/linux的相反) 在移植的时候,主要裁剪FreeRTOS/Source/portable文件夹,该文件夹用来针对不同MCU做的一 ...

  9. C#面试分享：单例模式

    C#面试分享:单例模式 提问1:请给出单例模式的实现: 答: public class Animal { private static Animal _instance = null; private ...

  10. 【大数据】了解Hadoop框架的基础知识

    介绍 此Refcard提供了Apache Hadoop,这是最流行的软件框架,可使用简单的高级编程模型实现大型数据集的分布式存储和处理.我们将介绍Hadoop最重要的概念,描述其架构,指导您如何开始使 ...