zoukankan      html  css  js  c++  java
  • html5——伸缩布局

    基本概念

    1、主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向

    2、侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的

    3、方向:默认主轴从左向右,侧轴默认从上到下

    4、主轴和侧轴并不是固定不变的,通过flex-direction可以互换

    display: flex;//给父盒子加flex属性,父盒子将具有伸缩属性,子盒子默认平铺

    效果特征

    1、设置了伸缩属性,在没有设置宽度的情况下是100%

    2、设置了伸缩属性,行内元素会转化成块级元素,可以设置宽高,独占一行

    主轴方向

    flex-direction: row;//水平方向(默认)
    flex-direction: row-reverse;//水平翻转
    flex-direction: column;//垂直方向
    flex-direction: column-reverse;//垂直翻转

    对齐方式

    1、justify-content:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

    justify-content: flex-start;//从主轴开始的方向对齐
    justify-content: flex-end;//从主轴结束的方向对齐
    justify-content: center;//居中对齐
    justify-content: space-around;//父盒子中平分
    justify-content: space-between;//两端对齐平分

    2、align-items:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

    align-items:flex-start;//从侧轴开始的方向对齐
    align-items:flex-end;//从侧轴结束的方向对齐
    align-items:center;//居中
    align-items:baseline;//基线对齐,默认同flex-start
    align-items:stretch;//拉伸

     参考地址:地址

  • 相关阅读:
    git 命令行下浏览器tig使用记录
    根据进程名字杀死进程
    centos7 在线安装postgresql9.5
    HttpClient使用代理访问
    nmap查看服务器端口使用情况
    java后台启动jar包
    不同语言,系统通过共享内存方式实现信息交互
    释放 MappedByteBuffer映射的内存
    Java使用ByteBuffer读取大文件
    Java共享内存
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/8085065.html
Copyright © 2011-2022 走看看