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. PHP学习笔记 01 之表单传值

    一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...

  2. matplotlib种类

    matplotlib模板: 1:线图 plot()单线段图 2:多个线图 subplot()Multiple axes (i.e. subplots) are created with the sub ...

  3. Chrome内核浏览器打开网页报 错误代码: ERR_TIMED_OUT

    升级win10之后如果出现chrome内核的浏览器网页总是打不开 打开很慢  而ie和edge是可以正常访问的 用这个方法可以  我弄了几天终于 搞好了我直接转载过来了近期,工程师收到大量反馈360浏 ...

  4. Netty2:粘包/拆包问题与使用LineBasedFrameDecoder的解决方案

    什么是粘包.拆包 粘包.拆包是Socket编程中最常遇见的一个问题,本文来研究一下Netty是如何解决粘包.拆包的,首先我们从什么是粘包.拆包开始说起: TCP是个"流"协议,所谓 ...

  5. Intellij Idea 无法启动项目的配置坑

    1. run/debug configuration里面,tomcat的deployment点击添加不能自动创建war-explorded包: 方案:删除project libraries,重新mav ...

  6. r.js合并实践

    项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js.下面就其用法说明一下. 首先建一个目录,里面的结构如下: require.js可以到r.js项目下载 r.js可 ...

  7. Vue(day8)

    继续上一篇文章的内容,本文主要内容为项目中新闻资讯模块的实现. 新闻资讯页面主要是当我们点击这个按钮时跳转到新闻列表界面. 一.新闻资讯的路由设计 将新闻资讯的标签改为路由:(a标签改为router- ...

  8. 安装虚拟机,磁盘选择厚置备延迟置零与厚置备置零和Thin Provision有什么区别

    (1)厚置备延迟置零: (2)厚置备置零: (3)Thin Provision(精简置备). 这三种类型的磁盘,每一种类型的磁盘创建的方式和磁盘性能都有所不同,具体解释如下.1.厚置备延迟置零举例,本 ...

  9. shell打印 倒等腰三角形

    #!/bin/bash read -p "input the length: " n方法一:内循环中的一个for循环shell写法for i in `seq 1 $n`do    ...

  10. Java并发-建立线程

    一.建立新的线程 Runnable r = () ->{ //线程所执行的逻辑代码 }; Thread thread = new Thread(r); thread.start(); 方法介绍 ...