• 很多人不明白这个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 属性是不起作用的；

属性值

用法

  1. <!DOCTYPE html>
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5. <head>
  6.     <meta charset="utf-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <title>Page Title</title>
  9.     <style>
  10.         .father {
  11.             width: 500px;
  12.             height: 100px;
  13.             background-color: red;
  14.             display: flex;
  15.             flex-flow:row;
  16.         }
  17.  
  18.         .box1 {
  19.             flex: 3;
  20.             background: blue;
  21.  
  22.         }
  23.         .box2{
  24.             flex: 2;
  25.             background: pink;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31.     <div class="father">
  32.         <div class="box1"></div>
  33.         <div class="box2"></div>
  34.     </div>
  35. </body>
  36.  
  37. </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. java学习（五）

    学号 20189214 <Java程序设计>第五周学习总结 教材学习内容总结 输入输出 文件系统可以包含3种类型的对象:文件.目录和符号链接. 一个文件或路径是一个java.io.File ...

  2. IIS配置支持跨域请求

    对于初次在IIS部署网站的同学,很容易忽略或不知道如何配置使其网站支持跨域请求,这里介绍一个最基础的方式,配置HTTP响应标头. 在IIS上选择HTTP响应标头,选择添加自定义响应标头,通常我们会添加 ...

  3. keepalived高可用简介与配置

    keepalived简介 keepalived介绍 Keepalived 软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可以实现高可用的VRRP ...

  4. lock(this)

    public void test(int i) { lock(this) { if (i > 10) { i--; test(i); } } } 网上答案说和参数有关.可是我把int  改成ob ...

  5. 移动 web 适配

    一.移动 web 开发与适配 1.跑在手机端的 web 页面(H5 页面) 2.跨平台(PC 端.手机端 - 安卓.IOS) 3.基于 webview(终端开发技术的一个组件) 4.告别 IE 拥抱  ...

  6. jQuery获取元素的方法

    1·$(".box").offset().left 获取盒子左边到浏览器左侧的距离(上右下相同): 2·$("span").width() 获取盒子的宽度(高度 ...

  7. oracle创建与mysql的dblink

    1.先简单介绍下环境   操作系统:windows 2008 R2 (64bits) oracle数据库:10gr2 10.2.0.3.0(32bits) mysql数据库:5.1 (32bits) ...

  8. CodeForces 935E Fafa and Ancient Mathematics (树形DP)

    题意:给定一个表达式,然后让你添加 n 个加号,m 个减号,使得表达式的值最大. 析:首先先要建立一个表达式树,这个应该很好建立,就不说了,dp[u][i][0] 表示 u 这个部分表达式,添加 i ...

  9. mysql官方的测试数据库employees超30万的数据，安装方法介绍

    安装方法 1.mysql必须开启环境变量 2.shift右键官方数据库打开在命令行运行此窗口 3.进入cmd以后输入mysql -uroot -proot 回车 4.输入 source  employ ...

  10. Spring核心

    方法区与常量池 BeanFactoryPostProcessor与BeanPostProcessor使用 创建pc过程 https://www.liangzl.com/get-article-deta ...