当前位置: 首页 > 开发杂谈 >

Day11 网页排版好朋友 - Flexbox

Flexbox的组成

Flexbox 是由外容器(flex container)与内元件(flex items)两部份组成,如下图

而外容器与内元件分别有不同的属性,必须了解属性放的位置是在外容器还是内元件,才能避免放错位置,产生不出效果的情况发生。

flex container常用属性有哪些?

  • display:flex;
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap

flex items常用属性有哪些?

  • flex-grow
  • flex-shrink
  • flex-basis
  • align-self
  • order

flexbox必备属性display:flex;

特性:

  1. 使内元件并排在flex container内
    例如: 未使用display:flex;前,内元件根据本身区块元素的特性会换行

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    
    .container{
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    .item{
    width:100px;
    background-color:skyblue;
    text-align: center;
    font-size: 36px;
    color:royalblue;
    margin:10px;
    }
    

    使用display:flex;後,内元件会并排

    .container{
    display:flex; 
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    
  2. 内元件会根据外容器的等比例调整宽度
    就算内元件宽度加总超过了外容器宽度,也不会出错

    .container{
    display:flex; 
    background-color: pink;
    width: 500px;
    margin: 0 auto; 
    padding: 10px;
    }
    .item{
    width:300px;
    background-color:skyblue;
    text-align: center;
    font-size: 36px;
    color:royalblue;
    margin:10px;
    }
    
  3. 预设等高


Flexbox的两个轴线 (主轴及交错轴)

1. 主轴(The main axis)

主轴的排列方向是由外容器的flex-direction属性来定义的,有以下四种的排列方式:

  1. flex-direction: row; (预设) 从左到右排列

  2. flex-direction: row-reverse; 从右到左排列

  3. flex-direction: column; 从上到下排列

  4. flex-direction: column-reverse; 从下到上排列

2. 交错轴(The cross axis)

不论主轴的方向怎麽更改,交错轴都会和主轴垂直

参考资料与图片来源:Basic concepts of flexbox

设定内元件在主轴上的排列方式 justify-content

  • justify-content: flex-start; (预设) 对齐主轴线的起点
  • justify-content: center; 对齐主轴线中间
  • justify-content: flex-end; 对齐主轴线的终点
  • justify-content: space-between;宽度平均分配,第一个和最後一个会贴齐边缘
  • justify-content: space-around; 宽度和间距平均分配(中间留白较多 左右两边留白各占一半空间)
  • justify-content: space-evenly;左右两边留白一样

相关资料:justify-content

设定内元件在交错轴上的排列方式 align-items& align-content(多行)

  • align-items: flex-start;对齐交错轴线起点

  • align-items: center;置中对齐交错轴线

  • align-items: flex-end;对齐交错轴线终点

  • align-items: stretch; 内元件高度如果没有设定的状态下,是预设的属性

  • align-items: baseline; 基线(文字的底部)

  • align-content: start; 多行对齐交错轴线起点

  • align-content: center;多行置中对齐交错轴线

  • align-content: space-between; 宽度会平均分配,第一行和最後一行会贴齐边缘

  • align-content: space-around; 宽度和间距平均分配(中间留白较多 左右两边留白各占一半空间)

相关资料:align-content


flex-wrap 设定换行属性

因为设定了display:flex;,内元件就会根据外容器的等比例调整宽度,不会依照内元件设定的宽度改变
设定了flex-wrap就可以让内元件在超出范围时换行排列,而不会被自动调整宽度挤在同一行

  • flex-wrap: nowrap;(预设) 不换行
  • flex-wrap: wrap; 换行排列
  • flex-wrap:wrap-reverse; 换行时反转排列方式

flex flow是flex-direction 和 flex-wrap 的简称,可以使用flex-flow同时设定flex-direction 和flex-wrap
例如:flex-flow:column wrap;
相关资料:flex flow


flex属性

flex 是包含三个属性 flex-grow、flex-shrink 和 flex-basis 的简称
参考资料:flex

1. flex-basis

flex-basis: 内元件的基本大小,预设值为 0,可使用不同的单位值。
参考资料:flex-basis

2. flex-shrink

在外容器空间不够的状态下,使用flex-shrink依比例缩小以适应有限空间

例如:

 <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>

.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:300px;
	flex-shrink: 3;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-shrink: 1;
	background: blue;
	margin: 10px;
  }

.box2{
	width:200px;
	flex-shrink: 2;
	background-color: seagreen;
	margin: 10px;
}

3. flex-grow

在外容器有多余空间时,使用flex-grow分配内元件可在主轴上占外容器的空间比例
未设定时flex-grow,不会将剩余空间分配给内元件做伸展,分配的比例会依照设定的数值进行配置。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>
.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	flex-grow: 1;
	background-color: yellow;
	margin: 10px;
	
  }
  
.box1 {
	width:150px;
	flex-grow: 2;
	background: blue;
	margin: 10px;
  }

.box2{
	width:120px;
	flex-grow: 3;
	background-color: seagreen;
	margin: 10px;
}

参考资料:详解flex-grow与flex-shrink 图解 Flexbox 进阶属性


order改变内元件原有的排列顺序

order是用来定义元件的排列顺序,顺序会依据数值的大小排列。
例如:

  <div class="container">
      <div class="box">1</div>
      <div class="box1">2</div>
      <div class="box2">3</div>
  </div>
.container{
    display:flex; 
	background-color: pink;
	width: 500px;
	margin: 0 auto; 
	padding: 10px;

}

.box {
	width:100px;
	background-color: yellow;
	margin: 10px;
	order:2; 
  }
  
.box1 {
	width:100px;
	background: blue;
	margin: 10px;
	order:3;
  }

.box2{
	width:100px;
	background-color: seagreen;
	margin: 10px;
	order:1;
}

align-self 调整单一内元件交错轴的排列设定

会覆盖掉本来 align-items设定的值,可以个别设定单一元件的值
参考资料: align-self

以上为个人学习笔记整理
若有错误,欢迎指正


相关文章:

  • getters 就是欲望
  • PHP 扩展库(extension) 和 套件(package)
  • Day 15 | 元件状态:污染(被更改) Dirty
  • 开放最短路径优先 (OSPF)
  • 解密亚马逊A9算法,这21个影响要素你优化了吗?
  • Lazada卖家必知的关于退货率高的三个问题
  • 海运集装箱不能装的货物有哪些?
  • Day08 - 【入门篇】OAuth 2.0 Playground
  • 利用大数据分析预测MLB胜负(中)
  • 老天不会亏待努力的人,但更不会同情假勤奋的人。让自己没有退路,才有成功的可能。
  • 法国VAT代理注册及其常见问题
  • 速卖通商标入驻的常见问题汇总
  • 亚马逊平台海运规则和注意事项
  • A+物流退款保障计划怎样为卖家提供保障的?
  • [Python 爬虫这样学,一定是大拇指拉!] DAY09 - TCP / UDP
  • SiteGround域名转移教程:如何转出SiteGround域名
  • 移动怎么开通香港电话号码
  • WordPress SEO插件-Yoast V13.3 汉化中文版高级版
  • 教程/Directory Lister逗比魔改版 Github开源(个人云)
  • TikTok与LiveRamp合作,助力品牌安全可靠地触达受众
  • 2021年10个全球电子商务趋势[信息图] ,所有电商人员都该了解一下
  • 海外适合游戏投放的渠道有哪些?
  • vultr.com怎么申请退款教程和方法
  • 韩国Moack蘑菇CN2服务器评测和特价服务器,优惠码
  • VPS评测:阿里、腾讯、百度、京东VPS最低配理性对比
  • Python安装教程:怎么安装Python
  • Google SEO优化排名的技巧:做好这20件事情谷歌排名必定上去
  • 海外营销周报:Facebook将对其广告工具进行调整,Linkedin恢复中国境内账号注册
  • WordPress 5.7.1 修复2个安全问题,请及时更新
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN