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属性的更多相关文章

  1. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  2. css3 的content 属性

    content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...

  3. Easyui tabs的herf和content属性

    在backstage.jsp页面中我写了一个方法,用于在指定位置添加面板(id为msg的地方)function addTab(t,h){ if($('#msg').tabs('exists',t)){ ...

  4. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  5. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  6. CSS魔法堂:一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  7. 浅析requests库响应对象的text和content属性

    在做爬虫时请求网页的requests库是必不可少的,我们常常会用到 res = resquests.get(url) 方法,在获取网页的html代码时常常使用res的text属性: html = re ...

  8. WPF:为什么使用ContentPresenter.ContentSource而不是Content属性?

    因为ContentPresenter.ContentSource比Content属性加一个TemplateBinding看起来更方便?不仅仅是这些,实际上如果用ContentSource的话,Cont ...

  9. CSS3 content属性学习

    css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...

  10. 浅谈 easyui tabs 的href和content属性

    众所周知,jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”,本文就两种方式的优缺点进行简单分析和思考. 两者特点: ...

随机推荐

  1. Webdriver元素定位1

    元素的定位应该是自动化测试的核心,要想操作一个元素,首先应该识别这个元素. webdriver提供了一系列的元素定位方法,常用的有以下几种: id name class name tag link t ...

  2. 解决在使用Amoeba遇到的问题

    最近有同行在使用Amoeba 的过程中多少遇到了一些问题. 总结一下遇到问题的解决方法: 1.读写分离的时候设置的在queryRouter中设置无效? 读写分离配置的优先级别:        1)满足 ...

  3. 【bzoj3505】[Cqoi2014]数三角形

    [bzoj3505][Cqoi2014]数三角形 2014年5月15日3,5230 Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4×4的网格上的一个三角 ...

  4. 游走(bzoj 3143)

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  5. 【NOIP2017练习】函数变换(DP,dfs)

    题意: 思路: 极限步数大概不会超过30 ; ..max,..]of longint; eul:..max]of longint; cas,v,n,k,i,ans,j:longint; functio ...

  6. 【转】关于easyui tab 加载 js ajax 不走后台的问题, 怕找不到 以防万一

    一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行.今天在此说明一下原因. 不管是window,dailog还是tab其实质最终都是继承了panel.panel有两种方式展示 ...

  7. Servlet CDI 例子分析

    @WebServlet("/cdiservlet") //以@WebServlet注释开头,注释指定相对于上下文根的URL模式,即在根目录下使用/cdiservlet来访问 pub ...

  8. 洛谷 P4136 谁能赢呢?

    P4136 谁能赢呢? 题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移 ...

  9. RIP

    距离矢量路由协议 假设网络拓扑如下 192.168.1.0网段 - - - - R1 - - 192.168.12.0网段 - - R2 - - 192.168.23.0网段 - - R3 - - - ...

  10. 在ASP.NET Core 中使用Cookie中间件 (.net core 1.x适用)

    在ASP.NET Core 中使用Cookie中间件 ASP.NET Core 提供了Cookie中间件来序列化用户主题到一个加密的Cookie中并且在后来的请求中校验这个Cookie,再现用户并且分 ...