• 很多人不明白这个display:flex是到底是什么东西，如何使用的  。

1.什么是display：flex呢？

答：flex是 flexible  box的缩写，意为弹性布局 ；这个东西的引入，为盒模型提供了最大的灵活性！可以相应式的实现各种页面的布局。

基本概念

采用flex布局的元素，称为flex容器(flex   container)，简称容器。    在这个容器中默认存在两个轴：水平方向的主轴（main axis）和 垂直方向上的交叉轴（cross axis）。

图： （摘自：他人博客）

以下6个属性设置在容器上：

    • flex-direction   容器项目的排列方向（默认是横向排列）
    • flex-wrap      容器内项目的换行方式
    • flex-flow      flex-direction 和 flex-wrap 属性的复合属性。
    • justify-content   项目在主轴上对齐样式
    • align-item　　项目在交叉轴上如何对齐
    • align-content   定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

 注意：    如果元素不是弹性盒对象的元素，则flex-flow 属性是不起作用的；

属性值

用法

<!DOCTYPE html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <style>

        .father {

            width: 500px;

            height: 100px;

            background-color: red;

            display: flex;

            flex-flow:row;

        }

        .box1 {

            flex: 3;

            background: blue;

        }

        .box2{

            flex: 2;

            background: pink;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

以上仅是我个人初步学习！后期学习在进行更新!  ~~~~~~~~~~~

学习关于display ：flex 布局问题！的更多相关文章

  1. 1.display:flex布局笔记

    /*display:flex布局方式主要运用于垂直居中的效果*/ 一.Flex译为Flexible Box(弹性盒子),任何一个容器都可以指定为Flex布局 注:设置为Flex布局之后,子元素的flo ...

  2. display:flex 布局教程，弹性布局！

    display:flex 布局教程 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...

  3. display:flex 布局详解（2）

    1.  flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: <div class=" ...

  4. CSS学习笔记：flex布局

    目录 一.Flex布局简介 1. Flex布局的主要作用 2. Flex布局应用场景 二.Flex布局的使用 1. Flex布局的两种相关元素 2. 父项属性 2.1 flex- direction ...

  5. display:flex布局

    /*背景 居中 自适应 铺满容器*/ background: center / cover; flex布局是什么? flex是Flexibe Box 的缩写,意思为”弹性布局”, 用来为盒子模型提供最 ...

  6. display: flex; 布局

    废话不多说,供上我学习Flex布局的启蒙文章,一切的答案,尽在这里,仔细阅读,多多回味!保证你有所收获! http://www.ruanyifeng.com/blog/2015/07/flex-gra ...

  7. HTML/CSS：display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  8. 【原创】display:flex布局大全

    全都是自己写的 希望大家可以点个赞 谢谢! Html代码(没时间精简 请多包涵) <!DOCTYPE html> <html lang="en"> < ...

  9. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

  10. display:flex 布局之 骰子

    代码部分 html <body> <div class="box"> <div class="a a1"> <span ...

随机推荐

  1. PS教程：大神教你用PS制作《大鱼海棠》海报

        本来做的是一千左右像素的,但最后粗心让我存成500几px的了,可能会有点不清楚,唉,忙活这莫久竟然不敌最后一步的粗心呀     教程有千千万,但跟着作就好像是以前幼儿园老师拿着你的手写字,你可 ...

  2. 电商项目-商品表（spu）、规格表（sku）设计

    之前在工作中,需要实现商品规格功能,做了很长一段时间,现在回过头来整理下设计思路. sku,spu概念: SPU = Standard Product Unit (标准化产品单元),SPU是商品信息聚 ...

  3. short s=1;s=s+1;short s=1;s+=1;有什么区别？

    short s = 1; s = s + 1; 这个编译一定是不通过的,会提示损失精度. short s = 1; s += 1: 这个编译反而可以通过. 隐式类型转换可以由小到大自动转,即byte ...

  4. js几种数组遍历方法.

    第一种:普通的for循环 ; i < arr.length; i++) { } 这是最简单的一种遍历方法,也是使用的最多的一种,但是还能优化. 第二种:优化版for循环 ,len=arr.len ...

  5. 2019.03.29 NOIP训练 友好国度（点分治+容斥）

    传送门 思路: 直接上点分治+容斥计算每个因数对应的贡献即可. 代码: #include<bits/stdc++.h> #define ri register int using name ...

  6. Linux 第十六天

    十六.服务管理 1.服务分类 1)RPM包默认安装的服务:包括独立的服务.基于xinetd的服务 2)源码包安装的服务 3)RPM安装服务和源码包安装服务的区别就是安装位置的不同 >源码包安装在 ...

  7. CDR锁定方式

    每个通道的PMA包括一个通道PLL可以配置成接收器CDR.还可以把通道1和4的PLL配置成CMU PLL用于发送器. CDR有两种锁定方式 1.Lock-to-Reference Mode(LTR) ...

  8. getElementById和$()获取值一点注意事项

    <script type="text/javascript"> window.onload = function () { var obj = document.get ...

  9. vue.js 2.0(1)

    1.点击一个按钮打开,关闭弹框 2.实现滚动监听,导航看顶置,实现某元素吸顶 路由

  10. DOS 命令 os系统（windows）

    一.cd 相关操作 1."cd .. "or "cd ..\" --返回上一级 2.cd E:\Python -- 进入目录 二.dir --drectory ...