<html>

 <div class="box1">

            <span>1</span>

            <span>2</span>

            <span>3</span>

  </div>

 <div class="box2">

            <span>1</span>

            <span>2</span>

            <span>3</span>

        </div>

</html>

<style>

.box1{

    /* display: flex; */   /* 块级元素flex布局 */

    /* display: inline-flex; */  /* 行列元素flex布局 */

    /* display: flex;

   flex-direction:row; */

   /* 父级左浮动 顺序*/

   /* display: flex;

   flex-direction:row-reverse; */

   /* 子级倒序  右浮动 */

   /* display: flex;

   flex-direction:column; */

   /* 子级随标签元素（块级或者行内） 顺序 */

   /* display: flex;

   flex-direction: column-reverse; */

   /* 子级随标签元素（块级或者行内）  倒序 */

    /* display: flex;

    flex-wrap: nowrap; */

    /* 不换行 不管子级的宽度，即使子级宽度超过父级宽度也不会换行。*/

    /* display: flex;

    flex-wrap: wrap; */

    /* 换行，超过父级就换行。 */

    /* display: flex;

    flex-wrap: wrap-reverse; */

    /* 只要换行子级就倒序排列，不换行还是顺序 */

    /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */

    /* display:flex; */

    /* flex-flow: column wrap; */

    /* display: flex;

    justify-content:flex-start; */

    /* 左对齐（倒序） */

    /* display: flex;

    justify-content:flex-end; */

    /* 右对齐（顺序） */

     /* display: flex;

    justify-content:center; */

    /* 居中（顺序） */

     /* display: flex;

    justify-content:space-between; */

    /* 两端对齐，项目之间的间隔都相等。 */

     /* display: flex;

    justify-content:space-around; */

    /* 每个项目两侧的间隔相等。 */

}

.box1span{

    text-align: center;

    border:1px solid #ccc;

}

.box2{

    display: flex;

    width:100%;

}

.box2 span{

    flex-grow: 1;

    width:0;

    bordeR:1px solid #f00;

}

</style>

flex布局个人总结的更多相关文章

  1. Flex 布局教程：语法篇

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

  2. Flex 布局教程：实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  3. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  4. css flex布局

    关于flex布局的一些简单用法 效果(下图) 实现代码: <!--html--> <div class="wrap"> <div class=&quo ...

  5. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  6. CSS之flex布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. flex布局示例

    来自:授权地址 作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...

  8. 【转】Flex 布局语法教程

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

  9. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  10. flex布局

    一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

  1. Operating System：操作系统启动总结

    现代操作系统的启动引导过程会有所差异,本文仅针对Intel x86系列作讲解,了解原理即可. 系统引导过程总体介绍 系统引导过程主要由以下几个步骤组成(以硬盘启动为例)1.开机:2.BIOS加电自检( ...

  2. IGS OPC UA 配置

    igs项目-右键属性-选择OPC UA,如图配置 ,其他默认 如果打开的是IGS-administration,在右下角会有通知栏图标,右键图标选择 OPC UA 配置 添加服务器节点,网络适配器选择 ...

  3. 线程同步之信号量（sem_init,sem_post,sem_wait）

    信号量和互斥锁(mutex)的区别:互斥锁只允许一个线程进入临界区,而信号量允许多个线程同时进入临界区. 不多做解释,要使用信号量同步,需要包含头文件semaphore.h. 主要用到的函数: int ...

  4. confirm() ：带有指定消息和 OK 及取消按钮的对话框

    定义和用法 confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框. 语法 confirm(message) 参数描述 message 要在 window 上弹出的对话框中显示的 ...

  5. μC/OS-III---I笔记3---时间管理

    时间管理相关函数,其实深入根本的理解就是一些对时间任务相关变量,数据结果进行修改的函数这样方便对应任务查找延时等时间相关的任务有没有到期.前面的时间相关的函数是这些操作的基 1.延时函数 OsTIme ...

  6. Linux & change username & computer name & .bashrc

    Linux & change username & computer name ubuntu change username and computer name https://ask ...

  7. browsers simulator

    browsers simulator https://developers.google.com/web/tools/chrome-devtools/device-mode/testing-other ...

  8. js & array & shuffle

    js & array & shuffle const list = [1, 2, 3, 4, 5, 6, 7, 8, 9]; list.sort(() => Math.rando ...

  9. py django

    创建项目 $ django-admin startproject server 运行项目 $ cd server $ python manage.py runserver 创建一个模块 $ pytho ...

  10. NGK DeFi项目即将上线，打造去中心化闭环金融生态！

    据最新官方消息称:NGK已于近日宣布将进军DeFi领域,NGK此次的DeFi的项目将会是一个去中心的交易平台,其最大的功能是进行数字货币的交换.在用户选择了需要支付的数字货币和想购买的数字货币后,系统 ...