参考链接：

https://www.cnblogs.com/qingchunshiguang/p/8011103.html

练习代码

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

      .container{

        background-color: orange;

        width:300px;

        height:300px;

        display:flex;

        justify-content:space-between;

        align-items: center;

      }

      .div1{

        background-color: red;

        width:100px;

        height:100px;

      }

      .div2{

        background-color: blue;

        width:100px;

        height:100px;

      }

      .div3{

        background-color: green;

        width:100px;

        height:100px;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="div1">

      </div>

      <div class="div2">

      </div>

      <div class="div3">

      </div>

    </div>

  </body>

</html>

CSS布局之flexbox的更多相关文章

  1. 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定

    传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...

  2. CSS布局（下）

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  3. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  4. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  5. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  6. 一览css布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  7. 响应式布局：Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

  8. css布局详解（二）——标准流布局（Nomal flow）

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  9. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

随机推荐

  1. centos v7.0配置sftp

    需求: 1.建立三个sftp帐号,admin,test1,test22.三个帐号分别在/home/sftp下拥有相应的目录3.test1和test2只能进入自己的目录,admin可以进入三个目录(ch ...

  2. Shell编程、part1

    1.shell简介 2. shell分类 3. 查看shell 4. 第一个shell脚本 5. shell编程常用命令 5.1 grep 5.2 cut 5.3 sort 5.4 uniq 5.5 ...

  3. 【VS开发】【智能语音处理】DTW算法（语音识别）

    DTW主要是应用在孤立词识别的算法,用来识别一些特定的指令比较好用,这个算法是基于DP(动态规划)的算法基础上发展而来的.这里介绍语音识别就先介绍下语音识别的框架,首先我们要有一个比对的模版声音,然后 ...

  4. ArrayList和LinkedList的底层代码实现思想

    ArrayList是Java众多集合类中的一个,实现List接口,List的父接口是Collection.ArrayList底层的数据结构是线性表中的顺序表,底层是一个长度可以动态增长的数组.数组有很 ...

  5. Luogu P4095 [HEOI2013]Eden的新背包问题

    题目 求出从前往后的背包\(f_{i,j}\)和从后往前的背包\(F_{i,j}\). 那么对于询问\((d,e)\),答案就是\(\max\limits_{i=0}^e f_{d-1,i}+F_{d ...

  6. laravel的monolog使用

    Laravel 集成了 Monolog 日志函数库,Monolog 支持和提供多种强大的日志处理功能. 1.设置,日志模式 (1)Laravel 提供可立即使用的 single.daily.syslo ...

  7. java hashmap&concurrentHashmap源理

    Java集合:HashMap底层实现和原理(源码解析) https://www.cnblogs.com/java-jun-world2099/p/9258605.html HashMap源码解析JDK ...

  8. ES6 环境的搭建

    安装babel npm install --g babel-cli 在项目目录下输入 npm init -y 会自动创建package.json文件 babel src/index.js -o dis ...

  9. mysql 函数GROUP_CONCAT(temp.amount SEPARATOR ',')的用法

    mysql 函数GROUP_CONCAT(temp.amount SEPARATOR ',')的用法 使用场景:例如:想要查询用户的最喜欢购买的几种商品,这个时候就需要使用group_concat(字 ...

  10. phpstudy mysql数据连接不上(#1130)解决办法

    问题:无论输什么密码,都显示#1130,找半天在终于在百度知道找到了,其他帖子都是水贴,暂时不知道为什么要这么加,反正加了重置服务就好了,重新打开phpMyAdmin 输入默认密码root既可 解决办 ...