Flexの使用
22250 ワード
主にFlexの各属性をまとめました.一部の例はあまり実現できないかもしれません.当時のでたらめな書き込みは、まず大神のメモを見に来てください.http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
01 Flexの定義と使用
1.FlexはFlexible Boxの略語で、「弾性配置」を意味し、箱型モデルのために最大の柔軟性を提供する.
2.どのコンテナもFlexレイアウトに指定できます.
3.Flexレイアウトの要素を使用して、Flex容器(flex container)といい、略して「容器」といいます.そのすべてのサブ要素は自動的に容器のメンバーになります.Flexプロジェクトと呼ばれ、略して「プロジェクト」と呼ばれます.
4.容器には標準的に二本の軸があります.水平の主軸と垂直のクロス軸があります.主軸の開始位置(枠との交差点)をmain startといい、終了位置をmain endといいます.クロス軸の開始位置をcross startといい、終了位置をcross endといいます.
5.プロジェクトはデフォルトで主軸に沿って並べられています.単一のプロジェクトが占めている主軸空間はメーンシーズといい、占有されているクロス軸空間はクロスサイゼといいます.
01 Flexの定義と使用
1.FlexはFlexible Boxの略語で、「弾性配置」を意味し、箱型モデルのために最大の柔軟性を提供する.
2.どのコンテナもFlexレイアウトに指定できます.
3.Flexレイアウトの要素を使用して、Flex容器(flex container)といい、略して「容器」といいます.そのすべてのサブ要素は自動的に容器のメンバーになります.Flexプロジェクトと呼ばれ、略して「プロジェクト」と呼ばれます.
4.容器には標準的に二本の軸があります.水平の主軸と垂直のクロス軸があります.主軸の開始位置(枠との交差点)をmain startといい、終了位置をmain endといいます.クロス軸の開始位置をcross startといい、終了位置をcross endといいます.
5.プロジェクトはデフォルトで主軸に沿って並べられています.単一のプロジェクトが占めている主軸空間はメーンシーズといい、占有されているクロス軸空間はクロスサイゼといいます.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex title>
head>
<style>
.box{
display: flex;
/*flex-direction: column;*/
/*flex-direction: row-reverse; // */
/*flex-wrap: nowrap; // */
/*flex-wrap: wrap; // */
/*flex-wrap: wrap-reverse; // ， */
align-items: stretch;
}
.box div{
width: 30%;
height: 100px;
background-color: lime;
margin-top: 10px;
margin-right: 10px;
/*order: 0; ??*/
/*flex-grow: 1;*/
/*flex-shrink: 1;*/
/*flex-basis: 30%; ??*/
/*flex: auto;*/
}
.box .box2{
/*flex-grow: 2;*/
/*flex-shrink: 0;*/
/*align-self: flex-end;*/
}
/* Flex */
/*.box{*/
/* display: inline-flex;*/
/*}*/
/*Webkit ， -webkit 。*/
/*.box{*/
/* display: -webkit-flex; !* Safari *!*/
/* display: flex;*/
/*}*/
/* ， Flex ， float、clear vertical-align 。*/
style>
<body>
<div class="box">
<div>1div>
<div class="box2">2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
<div>7div>
<div>8div>
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex title>
<style>
/*1.flex-direction
（ ）。*/
/*.box {*/
/* flex-direction: row（ ）： ， |*/
/* row-reverse： ， |*/
/* column： ， |*/
/* column-reverse： ， ;*/
/*}*/
/* ， */
/*.box{*/
/* display: flex;*/
/* flex-direction: row;*/
/* flex-wrap: nowrap;*/
/*}*/
/*.box div{*/
/* width: 30%;*/
/* height: 100px;*/
/* background-color: #ff6600;*/
/* margin-bottom: 10px;*/
/*}*/
/*2.flex-wrap :
， 。*/
/*.box{*/
/* flex-wrap: nowrap | wrap | wrap-reverse;*/
/*}*/
/* 。*/
/*（1）nowrap（ ）： 。*/
/*（2）wrap： ， 。*/
/*（3）wrap-reverse： ， 。*/
/*3.flex-flow :
flex-direction flex-wrap ， row nowrap。*/
/*.box {*/
/* flex-flow: || ;*/
/*}*/
/*4.justify-content
【 】 。*/
/*.box {*/
/* justify-content: flex-start( ) |
flex-end( ) |
center（ ） |
space-between： ， 。（ div ， ， ，div ） |
space-around： 。 ， 。（ div ， ， ，div ）;*/
/*}*/
/*5.align-items
【 】 。*/
/*.box {*/
/* align-items: flex-start（ ） |
flex-end（ ） |
center（ ） |
baseline（ ） |
stretch（ ）： auto， ;*/
/*}*/
/*6.align-content
【 】 。 ， 。*/
/*.box {*/
/* align-content: flex-start（ ） |
flex-end（ ） |
center（ ） |
space-between（ ， ） |
space-around（ 。 ， ？？） |
stretch（ ）： ;*/
/*}*/
style>
head>
<body>
<div class="box">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*1.order
（ ）。 ， ， 0。
：
【
1 1 1 2 3
-1 1 2 5
】
：【 2
2
99
】
*/
/*.item {*/
/* order: ;*/
/*}*/
/*2.flex-grow （0 、1 2）
（ ）， 0， ， 。*/
/*.item {*/
/* flex-grow: ; !* default 0 *!*/
/*}*/
/* flex-grow 1， （ ）。
flex-grow 2， 1， 。*/
/*3.flex-shrink （1 ，0 ）
（ ）， 1， ， 。*/
/*.item {*/
/* flex-shrink: ; !* default 1 *!*/
/*}*/
/* flex-shrink 1， ， 。
flex-shrink 0， 1， ， 。
！！ 。*/
/*4.flex-basis */
/* ( )， （main size）。
， 。 auto， 。*/
/*.item {*/
/* flex-basis: |
auto; !* default auto *!
*/
/*}*/
/* width height （ 350px）， 。*/
/*5.flex flex-grow, flex-shrink flex-basis ，
0 1 auto。 。*/
/*.item {*/
/* flex: none | [ ? || ]*/
/*}*/
/* ：auto (1 1 auto) none (0 0 auto)。*/
/*!! ， ， 。*/
/*6.align-self
， align-items 。
auto， align-items ，
， stretch。*/
/*.item {*/
/* align-self: auto |
flex-start |
flex-end |
center |
baseline |
stretch;*/
/*}*/
style>
head>
<body>
body>
html>