flex对齐

flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。

主轴 justify-content

 

justify-content对齐方式共有5种对齐方式：

flex-start ：主轴起点边缘开始，从左向右。

flex-end ：主轴终点边缘开始，从右向左。

center ：主轴中间开始，向两端伸缩。

space-between：主轴两端对齐。

space-around ： 与space-between区别就是起始端与结束端间隔相等。

交叉轴： align-content

align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

align-items

用于单行/单列对齐，沿主轴方向对齐。

flex-start ：主轴起点。

flex-end ：主轴终点。

center：主轴中间。

stretch ： 拉伸。

baseline：基线对齐。

自身对齐方式：align-self

用于单行（或单列），沿交叉轴方向对齐。

flex-start ：交叉轴起点。

flex-end ：交叉轴终点。

center：交叉轴中间。

stretch ： 拉伸。

baseline：基线对齐。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0px;

        }

        .box{

            width: 50px;

            height: 50px;

        }

        .flexbox-row{

            margin: 50px auto;

            display: flex;

            flex-direction: row;

            width: 120px;

            height: 320px;

            border: 1px #ccc solid;

            flex-wrap: wrap;

            /**

                左上角

                justify-content: flex-start;

                align-content: flex-start;

                左下角

                justify-content: flex-start;

                align-content: flex-end;

                右上角

                justify-content: flex-end;

                align-content: flex-start;

             */

            justify-content: flex-end;

            align-content: flex-end;

        }

    </style>

</head>

<body>

<div class="flexbox-row">

    <div class="box" style="background-color:coral;">A</div>

    <div class="box" style="background-color:lightblue;">B</div>

    <div class="box" style="background-color:khaki;">C</div>

    <div class="box" style="background-color:pink;align-self: flex-start;">D</div>

    <div class="box" style="background-color:lightgrey;">E</div>

    <div class="box" style="background-color:lightgreen;">F</div>

</div>

<script>

</script>

</body>

</html>

弹性布局 - flex对齐的更多相关文章

  1. 弹性布局flex

    前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...

  2. 前端入门5-CSS弹性布局flex

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  3. 弹性布局Flex的基本语法

    一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...

  4. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  5. 简单探讨弹性布局flex

    css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...

  6. 弹性布局flex 介绍

    摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  7. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  8. 弹性布局-flex

    浅谈display:flex   display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部 ...

  9. 弹性布局--flex方向

    flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...

随机推荐

  1. 【转】asp.net基础-HttpModule

    HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...

  2. Maven把项目依赖的所有jar包都打到同一个jar中

    目录 1 使用maven-shade-plugin 2 推荐: 使用maven-assembly-plugin 3 扩展: Maven安装本地jar包到本地仓库 4 扩展: 手动生成jar包 5 扩展 ...

  3. RabbitMq在CentOs7下的完整安装步骤，带你踩坑

    1.前言 因为公司项目中用的RabbitMq来做消息处理,自己以前没有接触过,所以想自学一下.然额,光安装就花了6.7个小时才搞定,中间还换过一个版本,综合国内外博客才最终将所有安装中遇到的问题解决掉 ...

  4. 前端笔记之Canvas

    一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要 ...

  5. POLARDB · 最佳实践 · POLARDB不得不知道的秘密(二)

    前言 POLARDB For MySQL(下文简称POLARDB)目前是阿里云数据库团队主推的关系型数据库.线上已经有很多企业用户在使用并且稳定运行了很久.当然,由于POLARDB是为云上环境专门打造 ...

  6. 《ASP.NET MVC 5 高级编程》学习笔记

    前言: 记得当初培训的时候,学习的还是ASP.NET,现在回想一下,图片水印.统计人数.过滤器....HttpHandler是多么的经典! 不过后来接触到了MVC,便立马爱上了它.Model-View ...

  7. 5G 时代，可能是什么样呢？

        (摄于上海陆家嘴) 众所周知,5g时代即将到来,其相关的区块链技术也将在更多的领域以及方面发挥越来越多的作用. 与新模式与新领域这种软性变化不同,新技术的产生,有着足够的想象空间.仅从内容创作 ...

  8. 通过 mysqlbinlog 和 grep 命令定位binlog文件中指定操作

    1.binlog日志基本知识 MySQL的二进制日志binlog可以说是MySQL最重要的日志,它记录了所有的DDL和DML语句(除了数据查询语句select),以事件形式记录,还包含语句所执行的消耗 ...

  9. Socket深度探索 4 PHP（转）

    [连载] Socket 深度探索 4 PHP (一) [连载] Socket 深度探究 4 PHP (二) [连载] Socket 深度探究 4 PHP (三)

  10. ASP.NET Core 快速入门（环境篇）

    [申明]:本人.NET Core小白.Linux小白.MySql小白.nginx小白.而今天要说是让你精通Linux ... 的开机与关机.nginx安装与部署.Core的Hello World .. ...