【前端学习笔记 CSS系列二十二】justify

一、效果

二、代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>justify-content属性</title><style>.x {width: 1000px;height: 300px;border: 2px solid pink;margin: 100px auto;display: flex;/* justify-content: flex-start; 默认的，让子元素从父容器的开头开始排序 *//* justify-content: flex-end;  让子元素从父容器的结尾开始排序,但是顺序不变 *//* justify-content: center; 让子元素在父元素中间显示 *//* justify-content: space-between; 左边和右边都贴近盒子,中间平分空隙 */justify-content: space-around; /* 相当于给每个盒子添加左右margin外边距 */}.x>div {width: 250px;height: 100%;}.x>div:first-child {background-color: pink;}.x>div:nth-child(2) {background-color: purple;}.x>div:nth-child(3) {background-color: skyblue;}.y {width: 1000px;height: 600px;border: 2px solid pink;margin: 100px auto;display: flex;/* justify-content: flex-start; 默认的，让子元素从父容器的开头开始排序 *//* justify-content: flex-end;  让子元素从父容器的结尾开始排序,但是顺序不变 *//* justify-content: center; 让子元素在父元素中间显示 *//* justify-content: space-between; 左边和右边都贴近盒子,中间平分空隙 */justify-content: space-around; /* 相当于给每个盒子添加左右margin外边距 *//* 垂直对齐 *//* align-items: flex-start; 默认的，让子元素从父容器的开头开始排序,上对齐 *//* align-items: flex-end; 底部对齐 *//* align-items: center; 垂直居中对齐 */align-items: stretch; /* 在子元素不给高度的前提下,拉伸子元素的高度使其适应父容器 */}.y>div {width: 250px;/* height: 200px;   在子元素不定义高度的情况下，stretch才会生效，相当于给height:100%;*/}.y>div:first-child {background-color: pink;}.y>div:nth-child(2) {background-color: purple;}.y>div:nth-child(3) {background-color: skyblue;}.wrap {width: 1000px;height: 200px;border: 2px solid pink;margin: 100px auto;display: flex;/* flex-wrap: nowrap; 默认的,不拆行或者不拆列,强制在一起压缩显示 */flex-wrap: wrap; /* 当宽度不够的时候换行显示 *//* flex-flow: row wrap; 简写形式,flex-flow: 排列方向 是否换行 *//* 小技巧：align-content是针对多行垂直对齐的方式，但使用的前提是必须display：flex，然后flex-wrap:wrap;*/}.wrap>div {width: 250px;height: 200px; }.wrap>div:first-child {background-color: pink;}.wrap>div:nth-child(2) {background-color: purple;}.wrap>div:nth-child(3) {background-color: skyblue;}.wrap>div:nth-child(4) {background-color: hotpink;order: -1;/* order越小，越排在前面，默认都是0 */}.wrap>div:nth-child(5) {background-color: deeppink;}</style></head><body><section class="x"><div>1</div><div>2</div><div>3</div></section><hr /><section class="y"><div>1</div><div>2</div><div>3</div></section><hr /><section class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section></body>
</html>

【前端学习笔记 CSS系列二十二】justify相关推荐

# java学习笔记 2020 2/8(十二)慕课网构造方法
java学习笔记 2020 2/8(十二)慕课网构造方法构造方法是一种特殊的方法,它是一个与类同名的方法. 对象的创建就是通过构造方法来完成,其功能主要是完成对象的初始化. 当类实例化一个对象时会 ...
Deep Learning（深度学习）学习笔记整理系列之（二）
Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...
卜若的代码笔记-数据结构系列-第十二章：栈三.链栈
1.太简单了,不介绍了,直接贴代码,有问题请看10,11,章 //测试代码public static void main(String[] args) throws IOException {Link ...
【RuoYi-Vue-Plus】学习笔记 46 - Redisson（十二）布隆过滤器 BloomFilter 简单分析
文章目录前言参考目录测试方法配置说明 Demo 方法功能调用流程分析 1.布隆过滤器的初始化 `tryInit` 1.1.创建布隆过滤器 1.2.初始化布隆过滤器 1.2.1.计算 bit ...
大数据学习环境搭建系列（十二）Xshell的安装使用
作者 | CDA数据分析师尽管很不适应也很不情愿,但在实际工作情景当中,企业不会将有限物理硬件的基础上给工作人员提供图形化桌面操作界面(此举将极大的浪费计算资源),因此大多数情况我们针对分布式集群的 ...
马良建模学习笔记——软包制作十二
本篇记录如下软包重点制作步骤: 1.画平面.转多边形,在面层级"插入"多个边,在边层级"连接"边,根据软包造型添加好几本的面及线 2.下图为大致的线布局,下面重 ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * {padding: 0;margin: 0; }body {font-size: 16px;color: burlywood; ...

【前端学习笔记 CSS系列二十二】justify

一、效果

二、代码

【前端学习笔记 CSS系列二十二】justify相关推荐

最新文章

热门文章