flex布局个人总结

<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布局个人总结的更多相关文章

Flex 布局教程：语法篇
作者: 阮一峰网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
Flex 布局教程：实例篇
该教程整理自阮一峰Flexible教程今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
css flex布局
关于flex布局的一些简单用法效果(下图) 实现代码:  <div class="wrap"> <div class=&quo ...
FLEX布局的一些问题和解决方法
前言露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...
CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
flex布局示例
来自:授权地址作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直 ...
【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
[flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...

随机推荐

C# 类 (10) - 命名空间NameSpace
NameSpace 命名空间是一系列类型的集合,比如很多方法,很多类,集合在一个空间(myspace)里,谁想用就先 using myspace,然后直接用不using myspace的话,想用里面 ...
ThinkCMF框架任意内容包含漏洞分析复现(写入shell+文件包哈)
ThinkCMF框架任意内容包含漏洞分析复现 0x00 简介 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建.ThinkCMF提出灵活的应用 ...
我是sakebow：新人报到，请多关照！
大家好这里是sakebow,实际上是从CSDN转生过来的(说得好像在CSDN死了一样),在那边是ordinary_brony.我的GitHub名字也是sakebow 来这里干什么主要还是想试试做个 ...
CSS border gradient color All In One
CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...
COOP & COEP
COOP & COEP Cross-Origin Opener Policy (COOP) and Cross-Origin Embedder Policy (COEP) https://de ...
HTML marquee
HTML marquee 跑马灯 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee https://developer ...
vue & table with operation slot
vue & table with operation slot seed demo  <template> <seed ref=& ...
市值达万亿？总量仅10万枚的VAST，先兑换先得！
据了解,SPC第一轮.第二轮空投已经结束,两轮空投下来共发放了400万枚SPC.NGK所有算力持有者有效账户基本获得了SPC空投奖励,甚至有的NGK算力持有者获得了数千枚SPC. 而为了进一步奖励NG ...
django学习-25.admin管理后台里：把表名称和表字段名称的展示值都由英文显示改为由中文显示
目录结构 1.前言 2.完整的操作步骤 2.1.第一步:修改模型类Article 2.2.第二步:重启服务 2.3.第三步:退出登录并再次成功登陆admin管理后台 2.4.第四步:查看最新的表名称展 ...
手把手教你Centos7 部署 gitlab社区版
一.前置说明: 操作系统:Centos 7 物理内存:>=2G 本人亲测,如果安装低版本的gitlab,比如我这里所使用的v8.17.0,物理内存1G,swap 2G虚拟内存即可部署.高版本的所 ...

flex布局个人总结

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

随机推荐

热门专题