zoukankan      html  css  js  c++  java
  • FFC详解及应用

    要使用 flexbox 布局,只需在父 HTML 元素上设置 display 属性

    display: flex;

     或者你可以以内联样式的显示

    display: inline-flex;
    

     

    当在父容器上设置了display: flex;或者display: inline-flex;后,它的子元素都自动变成flex项

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

    针对flex容器可以设置

    针对flex项目

        flex-basis

    flex-basis: number|auto|initial|inherit;

    number: 一个长度单位或者一个百分比,规定灵活项目的初始长度。

    auto: 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。

    小技巧

    1. 在flex布局中,margin: auto会吃掉每个方向上的剩余的空间,所以设置合适的margin可以达到一些特殊的效果,比如,给最后一个flex item设置flex-grow: 1会让它占用主轴上剩余的空间,配合text-align: right可以实现文字靠在最右侧的效果,但是使用margin-left: auto能更简单地实现上述效果。
  • 相关阅读:
    安卓开发_浅谈Android动画(三)
    安卓开发_浅谈Android动画(二)
    安卓开发_浅谈Android动画(一)
    Go语言获取系统性能数据gopsutil库
    Go语言标准库之log
    选项模式
    Go语言标准库之template
    Go语言基础之切片
    Go语言基础之反射
    Go语言基础之运算符
  • 原文地址:https://www.cnblogs.com/wangxirui/p/14252689.html
Copyright © 2011-2022 走看看