美文网首页
flex 学习笔记

flex 学习笔记

作者: 翟小乙 | 来源:发表于2021-08-25 14:51 被阅读0次
flex 基础属性
  1. 思路先确定主轴方向,在使用主轴和侧轴方法去设置
  2. flex 布局分为父属性和子属性:父属性是控制子元素排列,子属性是控制自身排列等属性

父属性:

  • flex-direction 主轴方向
  • justifry-content 主轴子元素排列方式
  • flex-wrap 子元素是否换行
  • align-content 侧轴上子元素排列方式(多行)
  • align-items 侧轴上子元素排列方式(单行)
  • flex-flow 复合属性 等同于 flex-direction flex-wrap 结合使用

子属性

  • flex 自身占用的分数比例
  • align-self 自身在侧轴的排列方式
  • order 定义子项排列顺序(前后:order越小越靠前

相关文章

  • 2018-07-18

    今天主要学习了flex布局,学习笔记如下: 1.指定flex布局: display:flex(任意容器)...

  • CSS flex布局学习笔记

    CSS flex布局学习笔记 flex简介 flex用于为容器内的子元素设置布局。当一个元素的display属性设...

  • flex学习笔记

    flex 基本概念 flex容器 容器 主轴开始位置 -- main start结束位置 -- main en...

  • #学习笔记#flex

    1、Flex是Flexible Box的缩写,意为"弹性布局",任何一个容器都可以指定为Flex布局。 2、fle...

  • flex学习笔记

    浏览器支持: chrome 21+ opera 12.1 + firefox 22+ safari 6.1+ ie...

  • flex 学习笔记

    flex 基础属性 思路先确定主轴方向,在使用主轴和侧轴方法去设置 flex 布局分为父属性和子属性:父属性是控制...

  • Flex学习笔记

    flex: 比重,等价于weight flexDirection:方向横向:row, row-reverse;竖向...

  • CSS Flex布局

    欢迎阅读阮一峰老师的原文,本篇为学习笔记 1. Flex布局 Flex是Flexible Box 的缩写,意为弹性...

  • 学习笔记《Flex布局》

    布局的传统解决方案,基于盒状模型,依赖 display + position + float。它对于那些特殊布局非...

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

网友评论

      本文标题:flex 学习笔记

      本文链接:https://www.haomeiwen.com/subject/xunsiltx.html