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>
上面代码的效果图(换行-在下方)
以后有在了解的再补上
css flex布局的更多相关文章
- CSS Flex布局完全指南 #flight.Archives002
Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...
- CSS flex 布局快速入门
以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
- css flex布局详解
来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?
cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
- css flex布局,小程序flex布局,垂直居中完美解决
flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...
随机推荐
- python网络编程
Socket是网络编程的一个抽象的概念. 通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 套 ...
- JS,删除数据时候,多次确认后才删除。
function delfun(){ if(window.confirm("请仔细核对无误,删除本数据后不能恢复.")){ if(window.confirm("请再次确 ...
- Postgresql允许远程访问配置修改
1.解决不能连接远程postgresql: postgresql默认情况下,远程访问不能成功,如果需要允许远程访问,需要修改两个配置文件,说明如下: 1.postgresql.conf 将该文件中的l ...
- 命令查询网站是否开启CDN加速
1.使用ping命令 不一定准确 运行-CMD 直接输入ping 域名 C:\Users\6503>ping www.netnic.com.cn 正在 Ping u999.v.qingcdn ...
- centos环境搭建
1.php -v 与phpinfo(); 不符,查看centos是否有自带的php:更改centos环境变量 /etc/profile,source /etc/profile生效: 2.pecl ...
- metaWeblog Test
#include "stdio.h" int main(int argc ,char **argv) { printf("argc = %d \n",arg ...
- shc
A tool for encrytion of bash shell scripts . Install: wget http://www.datsi.fi.upm.es/~frosal/sourc ...
- leetcode--Maximum Subarray
题目链接:https://leetcode.com/problems/maximum-subarray/ 算法类型:动态规划 题目分析:最大序列和 代码实现: class Solution(objec ...
- 日期格式转换 java 2016-09-03T00:00:00.000+08:00
/** * 日期格式转换yyyy-MM-dd'T'HH:mm:ss.SSSXXX (yyyy-MM-dd'T'HH:mm:ss.SSSZ) TO yyyy-MM-dd HH:mm:ss * @ ...
- [从产品角度学EXCEL 02]-EXCEL里的树形结构
这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...