justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式。
属性值:flex-start
属性值:flex-end
属性值:center
属性值:space-between
属性值:space-around
通过具体代码示例各个属性值的效果。
HTML结构
<div class="container flex">
<div class="items">A</div>
<div class="items">B</div>
<div class="items">C</div>
<div class="items">D</div>
<div class="items">E</div>
<div class="items">F</div>
<div class="items">G</div>
<div class="items">H</div>
</div>
CSS样式:
.container {
display: flex;
width: 1000px;
height: 500px;
background-color: gray;
margin: 20px auto;
} .items {
width: 300px;
height: 100px;
text-align: center;
line-height: 100px;
font-weight:;
color: gray;
} .items:nth-child(1) {
background-color: #ff0000;
} .items:nth-child(2) {
background-color: #ffff00;
} .items:nth-child(3) {
background-color: #ff00ff;
} .items:nth-child(4) {
background-color: #0000ff;
} .items:nth-child(5) {
background-color: #14a9ee;
} .items:nth-child(6) {
background-color: #71a03b;
} .items:nth-child(7) {
background-color: #c323eb;
} .items:nth-child(8) {
background-color: #ffffff;
}
属性值:flex-start
描述:默认值。项目位于容器的开头。
.flex {
flex-wrap: wrap;
justify-content: flex-start;
}
属性值:flex-end
描述:项目位于容器的结尾。
.flex {
flex-wrap: wrap;
justify-content: flex-end;
}
属性值center
描述:项目位于容器的中心。
.flex {
flex-wrap: wrap;
justify-content: center;
}
属性值:space-between
描述:项目位于各行之间留有空白的容器内。
.flex {
flex-wrap: wrap;
justify-content: space-between;
}
属性值:space-around
描述:项目位于各行之前、之间、之后都留有空白的容器内。
.flex {
flex-wrap: wrap;
justify-content: space-around;
}
justify-content属性的更多相关文章
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- css3 的content 属性
content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...
- Easyui tabs的herf和content属性
在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- CSS魔法堂:一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- 浅析requests库响应对象的text和content属性
在做爬虫时请求网页的requests库是必不可少的,我们常常会用到 res = resquests.get(url) 方法,在获取网页的html代码时常常使用res的text属性: html = re ...
- WPF:为什么使用ContentPresenter.ContentSource而不是Content属性?
因为ContentPresenter.ContentSource比Content属性加一个TemplateBinding看起来更方便?不仅仅是这些,实际上如果用ContentSource的话,Cont ...
- CSS3 content属性学习
css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...
- 浅谈 easyui tabs 的href和content属性
众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: ...
随机推荐
- xtu summer individual 5 D - Subsequence
Subsequence Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID ...
- Leetcode 139.单词拆分
单词拆分 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典 ...
- 【NOIP2017练习】怎样打好隔膜(贪心,堆,带删除priority_queue)
题意:OI大师抖儿在夺得银牌之后,顺利保送pku.这一天,抖儿问长者:“我的手速虽然已经站在了人类的巅峰,但是打隔膜还是输.我换了很多队友,但是没有用.请问应该怎样打好隔膜?”长者回答:“你啊,Too ...
- SQL SERVER代理作业删除失败问题
在SQL Server 2005上遇到了先删除已运行维护计划后,再删除代理中由其产生的作业时,提示删除失败. DELETE 语句与 REFERENCE 约束"FK_subplan_job ...
- zoj3988 Prime Set
思路不难想到二分图求个最大匹配P,若P>=K,则2*K即可,否则应为P*2+min(K-P,未匹配且有度数不为0的顶点个数s).但坑点在于有1的情况,所以如果直接建二分图去跑最大匹配会因为1的影 ...
- hdu5618(cdq分治求三维偏序)
题意:给n(n<=100000)个点,坐标为(xi,yi,zi)(1<=xi,yi,zi<=100000),定义一个点A比一个点B小,当且仅当xA<=xB,yA<=yB, ...
- 高数(A)下 第十一章
11.1 11.2 11.3 11.4 11.5
- 关于SQL命令中不等号(!=,<>)
比较两个表达式(比较运算符).当比较非空表达式时,如果左边操作数的数值不等于右边的操作数,则结果为 TRUE:否则结果为 FALSE.如果两个操作数中有一个或者两个都为 NULL,并且 SET ANS ...
- Python标准库:内置函数tuple([iterable])
本函数实现从可迭代对象生成一个元组对象返回.元组对象是一个不可改动的列表对象. 样例: #tuple() print(tuple([1, 2, 3])) print(tuple((1, 2, 3))) ...
- 【转】配置windows路由表,使电脑同时连接内网外网方法
1. 公司内部,内网和外网的网关不一样,怎么样让电脑可以同时上内网和外网呢? 来一张不相关的磁盘结构图: ----------------------------------------------- ...