关于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布局的更多相关文章

  1. CSS Flex布局完全指南 #flight.Archives002

    Title/CSS Flex布局完全指南 #flight.Archives002 序(from Ruanyf) : 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模 ...

  2. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  3. 轻轻松松学CSS:Flex布局

     Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...

  4. css flex布局详解

    来源:https://blog.csdn.net/liveinmylife/article/details/51838939 1,flex布局是个什么东西? 官方说法:Flex是Flexible Bo ...

  5. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  6. [Web 前端 ] 还在用浮动吗?CSS flex布局你了解多少?

    cp from : https://blog.csdn.net/wwwxuewen/article/details/80859764 传统的布局:围绕盒子模型(border.margin.paddin ...

  7. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  8. CSS flex 布局学习笔记

    写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...

  9. css flex布局,小程序flex布局,垂直居中完美解决

    flex弹性布局,很好的解决了垂直居中的问题,上代码: wxml: <view class='container'> <view class='item item1'>item ...

随机推荐

  1. python网络编程

    Socket是网络编程的一个抽象的概念. 通常我们用一个Socket表示"打开了一个网络链接",而打开一个Socket需要知道目标计算机的IP地址和端口号,再指定协议类型即可. 套 ...

  2. JS,删除数据时候,多次确认后才删除。

    function delfun(){ if(window.confirm("请仔细核对无误,删除本数据后不能恢复.")){ if(window.confirm("请再次确 ...

  3. Postgresql允许远程访问配置修改

    1.解决不能连接远程postgresql: postgresql默认情况下,远程访问不能成功,如果需要允许远程访问,需要修改两个配置文件,说明如下: 1.postgresql.conf 将该文件中的l ...

  4. 命令查询网站是否开启CDN加速

    1.使用ping命令 不一定准确  运行-CMD 直接输入ping  域名 C:\Users\6503>ping www.netnic.com.cn 正在 Ping u999.v.qingcdn ...

  5. centos环境搭建

    1.php -v 与phpinfo();    不符,查看centos是否有自带的php:更改centos环境变量 /etc/profile,source /etc/profile生效: 2.pecl ...

  6. metaWeblog Test

     #include "stdio.h" int main(int argc ,char **argv) { printf("argc = %d \n",arg ...

  7. shc

    A tool  for encrytion of bash shell scripts . Install: wget http://www.datsi.fi.upm.es/~frosal/sourc ...

  8. leetcode--Maximum Subarray

    题目链接:https://leetcode.com/problems/maximum-subarray/ 算法类型:动态规划 题目分析:最大序列和 代码实现: class Solution(objec ...

  9. 日期格式转换 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  * @ ...

  10. [从产品角度学EXCEL 02]-EXCEL里的树形结构

    这是<从产品角度学EXCEL>系列第三篇. 前言请看: 0 为什么要关注EXCEL的本质 1 excel是怎样运作的 或者你可以去微信公众号@尾巴说数 获得连载目录. 本文仅由尾巴本人发布 ...