CSS-Flex/Flexbox笔记-CSS3 Flex属性/布局相关问题

整理笔记..方便迅速复习和问题处理纪要

-------------------------------------------------------------------------------

觉得写的狠好，怒而转之

https://www.cnblogs.com/qcloud1001/p/9848619.html

FQ：

https://wcc723.github.io/css/2017/07/21/css-flex/

 

快速复习笔记扼要：

flexbox布局分主轴(Main Axis)与于交叉轴(Cross Axis)，且交叉轴是与主轴垂直90度的轴，所以flexbox布局可以理解成一个变换过的直角坐标系系统.主轴可以看做X轴和交叉轴看做Y轴

属性一览：

容器属性 　　--------整个容器Element项的全局设置

• flex-direction　　　　                  设置主轴的方向，可理解为直角坐标系的变换
• flex-wrap:                                       项折行设置   如 flex-wrap:nowrap; 为不折行.          
• justify-content　　　　               主轴的对齐方式 如，justify-content:center; 
• align-items:　　                             交叉轴的对齐和拉伸方式,但是只对首轴行（以轴方向的一个单位行）的element项有效.
• align-content                                同align-items,全部轴行有效.
• flex-flow　　                                   flex-direction和flex-wrap的组合,如flex-flow:row nowrap等同于 flex-direction: row; flex-wrap:nowrap;

 

元素属性　　--------单个指定Element项的设置

• • order　　                       排列次序
  • flex-grow　　                 设置单项容器项的放大比例（例如主轴剩余容器空间50px, 项一 grow 2, 项二 grow 3    则 ｛元素宽度｝+ 50px/(2+3) *3 = 新的大小）
  • flex-shrink　　　　        设置单项容器项的缩放比例（例如主轴超出容器空间50px, 项一 shrink 2, 项二 shrink 3 则 ｛元素宽度｝- 50px/(2+3) *3 = 新的大小）
  • flex-basis　　               设置主轴的初始尺寸
  • align-self　　                设置单项的交叉轴对齐和拉伸方式
  • flex                                 flex-grow,flex-shrink,flex-basis的组合

 

-----------------------------------------割------------------------------------------------------------------

　　flex问题

 

Q.flex布局下 使用滚动容器失效解决:

　　codepen:https://codepen.io/linqingwudiv1/pen/QWwEYQb

　　有些时候可能需要对滚动容器设置

　　　　min-height:100%;

　　　　height:0;

　　属性组合使之生效。