美文网首页
初见FLEX

初见FLEX

作者: cce117b0a0ce | 来源:发表于2017-08-03 20:12 被阅读8次
photo.jpg

FLEX布局

一种新的布局方式,flex布局

  1. flex布局与方向无关
  2. flex布局可以实现空间自动分配、自动对齐。
  3. flex适用于简单的线性布局。

flex container:

属性 作用
flex-direction 方向
flex-wrap 换行
flex-flow 上面两个简写
justify-content 主轴方向对齐方式 (center,space-between,space-around,flex-end,flex-start)
align-items 侧轴对齐方式 (strech,flex-start,flex-end,center )
align-content 多行、列内容对齐方式

flex container

flex item:

属性 作用
flex-grow 增长比例
flex-shrink 收缩比例
flex-basis 默认大小
flex 上面三个缩写
order 顺序(代替双飞翼)
slign-self 自身的对齐方式

flex item

  1. flex 实现手机布局
  2. 产品列表
  3. pc页面布局
  4. 完美居中

相关文章

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex布局初见

    一、简介  Flex布局为CSS3提供的一种新式页面布局方法,通过调整其内元素的宽高,从而在任何显示设备上实现对可...

  • CSS基础记录

    Flex flex和inline-flex flex-direction flex-wrap flex-flow ...

  • flex布局 flex, flex-grow,flex-shri

    flex是flex, flex-grow,flex-shrink, flex-basis 的缩写形式:flex-...

  • Flex 容器布局

    flex : none | flex-grow | flex-shrink | flex-basis flex:1...

  • flex 的三个参数 flex:1 0 auto

    flex :flex-group flex-shirk flex-basis ① flex-group 剩余空...

  • flex布局的伸缩规则

    flex: flex-grow flex-shrink flex-basis; flex-grow:变大 fle...

  • 2018-10-10

    flex布局 display: flex; //水平 flex-direction: row;(默认) flex-...

  • flex 布局 教程笔记

    flex 布局 容器属性flex-flow [flex-direction][flex-...

  • CSS相关

    flex:flex-grow flex-shrink flex-basis flex-grow 默认为0,即如果...

网友评论

      本文标题:初见FLEX

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