CSS3弹性布局内容对齐(justify-content)属性使用具体解释
内容对齐(justify-content)属性应用在弹性容器上。把弹性项沿着弹性容器的主轴线(main axis)对齐。
该操作发生在弹性长度以及自己主动边距被确定后。 它用来在存在剩余空间时怎样加以分配。也会在发生内容溢出时影响项目的对齐。
注意:弹性布局中有两个基本术语main axis和cross axis,普通情况下,我们能够把它们各自看作是屏幕上的行向和列向(可是严格讲,这和写模式以及弹性流方向有关)。
那么main-start和main-end就能够分别被看作是弹性容器的左右边。
justify-content语法例如以下:
justify-content: flex-start | flex-end | center | space-between | space-around
參数说明例如以下:
flex-start
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线。而兴许弹性项依次平齐摆放。
flex-end
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而兴许弹性项依次平齐摆放。
center
弹性项目居中紧挨着填充。
(假设剩余的自由空间是负的,则弹性项目将在两个方向上同一时候溢出)。
space-between
弹性项目平均分布在该行上。假设剩余空间为负或者仅仅有一个弹性项。则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐。然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
space-around
弹性项目平均分布在该行上,两边留有一半的间隔空间。假设剩余空间为负或者仅仅有一个弹性项。则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比方是20px)。同一时候首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
上图非常直观的演示了以上5个取值的效果和差异。
我们能够通过在线实例代码来自己測试下:
CSS3弹性布局内容对齐(justify-content)属性使用具体解释的更多相关文章
- CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐. 该操作发生在弹性长度以及自动边距被确定后. 它用来在存在剩余空间时如何加以分配 ...
- 【repost】CSS3弹性布局
本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...
- css3弹性布局语法全解
本文介绍css3弹性布局的语法 html布局 <div class="box"> <div class="item">1</div ...
- css3 弹性布局和多列布局
弹性盒子基础 弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性. 定义一个弹性盒子 在父盒子上定义display属性: #box{ display ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 弹性布局(display:flex;)属性详解
Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式.它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来. ...
- css3弹性布局
二.弹性布局(重点******************************************) 1.什么是弹性布局 弹性布局,是一种布局方式. 主要解决的是某个元素中子元素的布局方式 让页面 ...
- 弹性布局 - flex对齐
flex对齐 flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的. 主轴 justify-content justify-content对齐方式共有5种对齐方 ...
- CSS3弹性盒布局方式
一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...
随机推荐
- linux网络启动报错
报错信息: shutting down interface eth0: error:device "eth0" (/org/freedsktop/networkMaager/Dev ...
- weblogic管理脚本
start.sh Java代码 #!/usr/bin/bash # # start.sh # @auth: zhoulin@lianchuang.com # SERVER_STATUS () { s ...
- [AHOI 2009] 同类分布
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1799 [算法] 数位DP [代码] #include<bits/stdc++. ...
- linux的chmod,chown命令 详解
指令名称 : chmod 使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案 ...
- [转]java多线程并发去调用一个类的静态方法安全性探讨
文章转自:https://blog.csdn.net/weibin_6388/article/details/50750035 这篇文章主要讲多线程对静态方法访问的数据安全性 总结如下: 1,java ...
- Centos7 minimal 系列之Nginx负载均衡搭建(四)
一.Nginx搭建请参考我的上篇文章 http://www.cnblogs.com/WJ--NET/p/8143899.html 二.在IIS上搭建2个网站 三.配置nginx 虚拟机和主机网络互通请 ...
- vue-cli 3.0 安装和创建项目流程
使用前我们先了解下3.0较2.0有哪些区别 一.3.0 新加入了 TypeScript 以及 PWA 的支持二.部分命令发生了变化: 1.下载安装 npm install -g vue@cli 2. ...
- [C#学习笔记之异步编程模式2]BeginInvoke和EndInvoke方法 (转载)
为什么要进行异步回调?众所周知,普通方法运行,是单线程的,如果中途有大型操作(如:读取大文件,大批量操作数据库,网络传输等),都会导致方法阻塞,表现在界面上就是,程序卡或者死掉,界面元素不动了,不响应 ...
- Debian下签名无法验证
又收集到的新方法 gpg --keyserver subkeys.pgp.net --recv-keys AED4B06F473041FA && apt-key add /root ...
- 转载:常用 Git 命令清单
转载:常用 Git 命令清单 原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 作者: 阮一峰 我每天使用 Git , ...