zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    React Native Flexbox & CSS3 Flexbox

    https://facebook.github.io/react-native/docs/flexbox/

    https://reactnative.cn/docs/flexbox/


    CSS3 Flexbox

    https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    flex container & flex item

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

    main axis & cross axis

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

    1. 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
    2. 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
    3. 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    flex container's properties

    容器的 6个属性

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content

    flex-direction

    flex-direction: row | row-reverse | column | column-reverse; & default value(row)

    flex-wrap

    flex-wrap: nowrap | wrap | wrap-reverse; & default value(nowrap)

    https://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3

    flex-flow

    flex-flow is shorthand flex-direction & flex-wrap

    flex-flow: <‘flex-direction’> || <‘flex-wrap’> & default value(row nowrap)

    justify-content

    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; & default value(flex-start)

    align-items

    align-items: stretch | flex-start | flex-end | center | baseline; & default value(stretch)

    align-content

    align-content: flex-start | flex-end | center | space-between | space-around | stretch; & default value(flex-start)

    flex item's properties

    项目的 6个属性

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

    order

    order: <integer>; & default value(0)

    flex-grow

    flex-grow: <number>; & default value(0)

    flex-shrink

    flex-shrink: <number>; & default value(1)

    1. 负数无效

    flex-basis

    flex-basis: <length> | auto; & default value(auto)

    flex

    flex is shorthand for flex-grow & flex-shrink & flex-basis

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] & default value(0 1 auto)

    align-self

    align-self: auto | flex-start | flex-end | center | baseline | stretch; & default value(auto)

    align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch


    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    https://www.w3schools.com/css/css3_flexbox.asp

    https://zh.learnlayout.com/flexbox.html


    CSS3 Grid Layout

    https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html


    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    Struts2.5 利用Ajax将json数据传值到JSP
    io/nio
    Elasticsearch 、 Logstash以及Kibana 分布式日志
    zookeeper
    mybatis
    Kubemetes
    线程池
    @Builder
    jdk命令行工具系列
    什么是分布式事务
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/10769302.html
Copyright © 2011-2022 走看看