css弹性盒之justify-content详解

最新推荐文章于 2024-03-20 16:33:15 发布

悠悠香芋

最新推荐文章于 2024-03-20 16:33:15 发布

阅读量1.4k

点赞数 1

分类专栏： html、css 文章标签： justify-content flex

chen

本文链接：https://blog.csdn.net/goUp_self/article/details/96311216

版权

html、css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天没事把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;让所有弹性盒模型对象的子元素都有相同的长度,但是忽略它们内部的内容；内容过多还是要设置宽度，防止布局错乱

悠悠香芋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css弹性盒之justify-content详解

今天没事把css弹性盒常用及要注意的做一下整理：先上代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试</title><style>#main { width: 400px; height: 200px; ...
复制链接

扫一扫