关于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. 入门：Java Map<String,String>遍历及修改

    重点:在使用Map时注意key-value,key用于检索value的内容. 在正常情况下,可以不允许重复:在java中分为2中情况,一是内存地址重复,另一个是不同的地址但内容相等. 在使用Map是一 ...

  2. JAVA WEB项目中各种路径的获取

    JAVA WEB项目中各种路径的获取 标签: java webpath文件路径 2014-02-14 15:04 1746人阅读 评论(0) 收藏 举报  分类: JAVA开发(41)  1.可以在s ...

  3. 深入理解Java中的String

    一.String类 想要了解一个类,最好的办法就是看这个类的实现源代码,来看一下String类的源码: public final class String implements java.io.Ser ...

  4. Standard C 语言标准函数库介绍

    全面巩固所知所学,往精通方向迈进! Standard C 语言标准函数库速查 (Cheat Sheet) from:http://ganquan.info/standard-c/function/ C ...

  5. 碳膜电阻+1N5408二极管?

    整定电流: 整定: 调整, 确定, 是指某一物理量,到达某个一个设定值时, 设备开始动作. 主要是指电路中的一些起 保护作用的 继电器, 如: 电机, 控制电路中的 过电流继电器, 的整定值. 如空气 ...

  6. 学习CodeIgniter框架之旅（二）继承自定义类

    在很多情况下,框架类并不能满足项目的需求,这时候需要程序要自定义一些类,比如说基类等等,对比了TP框架,CI框架目前好像还没加入命名空间,这点TP做得比较好,不用特殊的处理就可以随便继承自定义的类,只 ...

  7. Android中Context的理解及使用(一)——Context的作用

    Context的作用:用来访问全局信息的接口,通过Context进行资源的访问. 1.Context获取字符串资源: public class MainActivity extends AppComp ...

  8. 一款强大的Android网络渗透软件dsploit

    dSploit是一款基于Android系统的功能十分全面强大的网络渗透工具,可以提供给网络安全工作人员检查网络的安全性.小黑这次主要使用了其中的"简易嗅探""会话劫持&q ...

  9. ubuntu 12.04 sever下安装jre

    具体步骤如下: 首先打开http://www.java.com/en/download/linux_manual.jsp?locale=en 选择你想下载的版本,此处我选择的是jre-7u25-lin ...

  10. 【UWP】解析GB2312、GBK编码网页乱码问题

    在WebHttpRequest请求网页后,获取到的中文是乱码,类似这样: <title>˹ŵ��Ϸ���������� - ��̳������ -  ˹ŵ��Ϸ����</title ...