css弹性盒之justify-content详解

今天没事把css弹性盒常用及要注意的做一下整理：
先上代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<style>
#main {width: 400px;height: 200px;border: 1px solid #c3c3c3;display: -webkit-flex; /* Safari */display: flex;justify-content:  flex-start;align-items:center;    /* 垂直方向上居中 */
}#main div {width:80px;    height: 70px;
}
</style>
</head>
<body><div id="main"><div style="background-color:coral;"></div><div style="background-color:lightblue;"></div><div style="background-color:khaki;"></div><div style="background-color:pink;"></div>
</div>

justify-content详解

定义和用法
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

属性值
flex-start 默认值。整体靠容器左侧对齐
flex-end 整体靠容器右侧对齐
center 整体位于容器的中心
space-between 各行之间留有空白
space-around 各行周围留有空白
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

注意

弹性盒父级必须display:flex;
flex:1;让所有弹性盒模型对象的子元素都有相同的长度,但是忽略它们内部的内容；内容过多还是要设置宽度，防止布局错乱

css弹性盒之justify-content详解相关推荐

html中style布局放哪,CSS样式表与格式布局详解
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例: 内联样式表内嵌样式表:必须写在head标签里例: p { 样式;} he ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
CSS——弹性盒模型(Flex)
CSS--弹性盒模型前言本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
php中li标签,li标签有哪些属性？css中li标签的属性详解
在html中,我们经常会遇到li标签,那么li标签有哪些属性?下面我们来了解一下css中li标签的属性. 一:标签有哪些属性在html中,使用css中li标签来控制样式,很多网站上都是点为开头,也有 ...
html css data-,HTML+CSS入门 HTML自定义data属性详解
本篇教程介绍了HTML+CSS入门 HTML自定义data属性详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 可以在HTML标签上添加任意以 "data-&q ...
css鼠标拖拉卡顿_详解overflow-scrolling解决滚动卡顿问题
前言如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题. 解决方法以下代码可解 ...
css弹性盒模型详解----flex-direction
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性一共有四种row(默认值):主轴为水平方向,起点在左端.row-reverse ...
css弹性盒模型详解----flex-wrap
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap(默认值):不换行wrap:自动换行wrap-reverse:换行,第一行在下方 ...
CSS弹性盒模型——flex详解
什么是flex 为什么用flex 初识flex flex-主轴方向与换行 flex-direction 例子: <!DOCTYPE html> <html lang="en ...

css弹性盒之justify-content详解

justify-content详解

css弹性盒之justify-content详解相关推荐

最新文章

热门文章