弹性布局 - flex对齐
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对齐的更多相关文章
- 弹性布局flex
前几天写过怪异盒子布局,以前在项目中用到弹性布局flex这个属性,当时没深入研究,这里各种查阅各种测试,把这个属性记录下 以免忘记, 弹性布局:是提供一种更加有效的方式来对一个容器中的条目进行排列.对 ...
- 前端入门5-CSS弹性布局flex
本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...
- 弹性布局Flex的基本语法
一.Flex的简介 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.用六个字概括弹性布局就是简单.方便.快速. flex( fle ...
- 微信小程序页面布局之弹性布局-Flex介绍
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...
- 简单探讨弹性布局flex
css 弹性布局: 盒子模型: box-sizing属性1.content-box 正常的普通的盒子模型用padding和border会使盒子变大:(向外扩张)2.border-box 盒子模型,pa ...
- 弹性布局flex 介绍
摘自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- 移动端弹性布局--flex
目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...
- 弹性布局-flex
浅谈display:flex display:flex 意思是弹性布局 首先flex的出现是为了解决哪些问题呢? 一.页面行排列布局 像此图左右两个div一排显示 可以用浮动的布局方式 html部 ...
- 弹性布局--flex方向
flex方向 flex方向由flex-direction特性决定,用于定义弹性布局模式.flex-direction共有4种模式:从左向右.从右向左.从上往下.从下往上. 主轴 主轴的起点与终点定义了 ...
随机推荐
- asp.net core系列 58 IS4 基于浏览器的JavaScript客户端应用程序
一. 概述 本篇探讨使用"基于浏览器的JavaScript客户端应用程序".与上篇实现功能一样,只不过这篇使用JavaScript作为客户端程序,而非core mvc的后台代码Ht ...
- Elasticsearch【快速入门】
前言:毕设项目还要求加了这个做大数据搜索,正好自己也比较感兴趣,就一起来学习学习吧! Elasticsearch 简介 Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分析引 ...
- matplotlib读取csv文件
一,从本地加载csv文件 from matplotlib import pyplot as pltimport numpy as npimport csv#用来正常显示中文标签plt.rcParams ...
- DSAPI中TCP、UDP、HTTP的选择
在DSAPI中,网络通讯主要有以下几种:1 [TCP] TCP服务端 TCP客户端 2 [UDP] UDP服务端 UDP客户端 UDP指令版服务端 UDP指令版客户端 3 [HTTP] HTTP服务端 ...
- 设计模式 | 原型模式(prototype)
定义: 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 结构:(书中图,侵删) 一个申明克隆自己的接口 若干具体的需要克隆自己的类 这个结构很简单,而且在Java中那个接口是不需 ...
- React 项目生产版本迭代页面不刷新问题
React 页面缓存 react 打包项目进行服务端部署后,会发现index.html被浏览器缓存,访问项目url指向的还是上个版本的内容.原理是index.html被缓存后,路由指向和跳转都是旧版的 ...
- openlayers4 入门开发系列之迁徙图篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- SpringCloud的分布式配置及消息总线
1.在搭建分布式配置时,我们大概看下分布式配置的流程 如图所示: 当一个系统中的配置文件发生改变的时候,我们需要重新启动该服务,才能使得新的配置文件生效,spring cloud config可以实现 ...
- IDEA创建applicationContext.xml 无法自动提示,文件图标是文本类型
问题:创建applicationContext.xml 的时候注册到file里边去了. 解决方法: 打开设置界面找到以下界面: 删除掉 Text 里边的 applicationContext.xml ...
- Django【部署】uwsgi+nginx
uwsgi 遵循wsgi协议的web服务器 uwsgi的安装 pip install uwsgi uwsgi的配置 项目部署时,需要把settings.py文件夹下的: DEBUG = FALSE A ...