Flexr布局笔记

简介

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

主轴和交叉轴

flex-direction:row

Image text

flex-direction:column

Image text

flex-direction:row-reverse

Image text

flex-direction:column-reverse

Image text 以上图片素材来自:https://www.cnblogs.com/qcloud1001/p/9848619.html

  • 主轴:元素排序是根据主轴的起点到终点排序
  • 交叉轴:不清楚究竟有啥用(既然有这个看的是有用的,等以后知道了在记录)

Flex容器的属性

容器属性
  • flex-flow:flex-direction属性和flex-wrap属性的简写,默认值为row nowrap
  • flex-direction 决定主轴的方向
    • row(默认值):定义排列方向 从左到右
    • row-reverse:定义排列方向 从右到左
    • column:从上到下
    • column-reverse 从下到上
  • flex-wrap 元素内自动换行(当前行不能全部展示自动换行)
    • nowrap(默认值):不换行,当前汉不能全部展示自动根据比例改变元素大小
    • wrap:换行
    • wrap-reverse:反向折行,是从容器底部开始的折行
  • justify-content 设置元素在主轴上的对齐方式
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center:居中
    • space-between:两端对齐(元素之间平均等分剩余空白间隙部分)
    • space-around:元素两边平均等分剩余空白间隙部分,最左或最右元素之间的距离是1:2
  • align-items 设置元素在交叉轴上的对齐方式
    • stretch(默认值):当元素的高度没有设置,则元素的高度会拉伸容器一致
    • flex-start:在交叉轴上向起点位置(向上/向左)对齐
    • flex-end:在交叉轴结束的位置(向上/向右) 对齐
    • center:居中对齐
    • baseline:保证元素中的文字都在一条基准线
  • align-content 只适用于多行的flex容器,并且当交叉轴上有多余空间
    • stretch(默认值):当宽度width没有设置的时候,则元素的宽度会拉伸容器一致
    • center:居中
    • flex-start:向左对齐
    • flex-end:向右对齐
    • space-between:两端对齐,元素之间的空白等比切分
    • space-around:轴线两边的空白等比切分
元素属性
  • order 控制元素的排列顺序,默认是0开始
    • 数字由0开始
  • flex-grow 控制元素放大比例,默认为0
  • flex-shrink 控制元素缩小比例,默认为0
  • flex-basis
  • flex
  • align-self
转载请注明来源:大尾巴狼博客/文章链接: 百度已收录
正文到此结束
吐槽0发
提交评论