关于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. MVC 总结

    以下内容摘自 PHP for Absolute Beginners, Thomas Blom Hansen & Jason Lengstorf The model-view-controlle ...

  2. fastclick 源码注解及一些基础知识点

    在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...

  3. Python学习总结 03 Plotly 学习总结

    一 Plotly 简介 Plotly是另一个免费进行数据分析和绘制图表的APP,建立在d3.js上. Plotly图可下载为SVG,EPS或PNG格式,并简单地导入到Illustrator或者Phot ...

  4. Hibernate组件和关联映射

    一.基本定义 组件:建立一个类,为了方便代码复用和建立模型,但类在数据库中并没有对应的表,此类可以作为一个组件插入到其他类中(有数据表的类) 组件和关联映射的关系是组件是没有对应的类;组件是值类型的, ...

  5. Java学习笔记14---使用标志位控制循环

    使用标志位控制循环 前面提到了控制循环的常用技术:计数器控制的循环.另一种控制循环的常用技术是在读取和处理一个集合的值时指派一个特殊值.这个特殊的输入值也成为标志值(sentinel value),用 ...

  6. express之sendFile

    module.exports = function(req, res, opt) { var applyNo = req.query.applyNo; console.log("applyN ...

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

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

  8. runtime

    7．runtime实现的机制是什么,怎么用,一般用于干嘛. 你还能记得你所使用的相关的头文件或者某些方法的名称吗? 运行时机制,runtime库里面包含了跟类.成员变量.方法相关的API,比如获取类里 ...

  9. Redhat6.4下安装Oracle10g

    Oracle10g_Redhat6.4 安装指南 文档说明 本文借鉴<Redhat_Linux_6.4下Oracle_10g安装配置手册><Redhat 6.4 安装 Oracle1 ...

  10. marquee上下左右循环无缝滚动代码

    一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...