美文网首页
Flex学习笔记

Flex学习笔记

作者: 學绘u | 来源:发表于2022-08-15 15:43 被阅读0次
  • flex: 比重，等价于weight
  • flexDirection:方向
    横向：row， row-reverse；
    竖向：column ，column-reverse
  • justifyContent：决定其子元素沿着主轴的排列方式，
    flex-start 集中在最上方
    center 整体竖向居中
    flex-end 集中在最下方
    space-around 均匀分布
    space-between 均匀铺满
  • alignItems：决定其子元素沿着次轴的排列方式，次轴与主轴垂直
    flex-start 集中在最左边
    center 整体横向居中
    flex-end 集中在最右边
    stretch 水平撑满，子组件不能设置固定的width。
    （不设置alignItems时，默认是flex-start）
    注意外层容器要加上flex:1，让组件有足够的空间。

相关文章

  • 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/tfclgrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Flex学习笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！