css flex布局

关于flex布局的一些简单用法

效果（下图）

实现代码：

<!--html-->
<div class="wrap"><div class="content">这是子盒子</div>
</div>//css
.wrap {display: flex;width: 300px;height: 300px;background-color: #ccc;justify-content: center;//子盒子位于现在的位置//justify-content: flex-start;子盒子位于现在的位置 的左边 //justify-content: flex-end;子盒子位于现在的位置 的右边
}
.content {width: 100px;height: 100px;line-height: 100px;text-align: center;background-color: orange;
}

效果（如下图）

<!--html-->
<div class="wrap"><div class="content">这是子盒子</div>
</div>//css
.wrap {display: flex;width: 300px;height: 300px;background-color: #ccc;
}
.content {width: 100px;height: 100px;line-height: 100px;text-align: center;background-color: orange;align-self: center;//位于上图中现在的位置//align-self: flex-start;位于上图中现在的位置  的上方//align-self: flex-end;位于上图中现在的位置  的下方
}

//用于父元素
justify-content: center | flex-start | flex-end;// 中  左   右  三个位置//用于子元素
align-self: center | flex-start | flex-end;// 中  上   下  三个位置//两个属性相互结合，就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>/*css*/.wrap{width:600px;height:300px;display:flex;background-color: #ccc;                     }.wrap div{width:25%;height: 150px;box-sizing: border-box;line-height: 150px;text-align: center;border: 1px solid blue;}</style>
</head>
<body>
<div class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</body>
</html>

上面代码的效果图（默认不换行）：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>/*css*/.wrap{width:600px;height:300px;display:flex;background-color: #ccc;flex-wrap: wrap;                      }.wrap div{width:25%;height: 150px;box-sizing: border-box;line-height: 150px;text-align: center;border: 1px solid blue;}</style>
</head>
<body>
<div class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</body>
</html>

上面代码的效果图（换行-在下方）

以后有在了解的再补上

转载于:https://www.cnblogs.com/guojikun/p/6179283.html

css flex布局相关推荐

css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
[css] flex布局的缺点有哪些？（除兼容性外）
[css] flex布局的缺点有哪些?(除兼容性外) 无法直接定义列数(要使用百分比的方式实现) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目 ...
html实现左图右文_让CSS flex布局最后一行左对齐的N种方法
作者:张鑫旭 https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 前言小伙伴们是否还记得,之前小编也发布了几篇关于CS ...
css flex布局模型（CSS justify-content 属性） - 代码案例
css flex布局模型(CSS justify-content 属性) - 代码案例效果图: . 代码如下: .father{display: -webkit-box;display: -ms- ...
html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
CSS flex布局
1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例注意:在下文中,将以parent指代父容器,item指代容器内的 ...
html 布局 flex,CSS flex布局
任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览 ...
W3C推荐的新布局模式【CSS Flex布局】详解
本文目录概述属性弹性容器的属性(父级) display flex-direction flex-wrap flex-flow justify-content align-items align- ...
html+css+flex布局制作个人简历
知识点: HTML,CSS,Flex弹性布局. 重点: Flex弹性布局,sticky定位. 目录: 图片自备源码 index.html <!DOCTYPE html> <html ...

css flex布局

css flex布局相关推荐

最新文章

热门文章