CSS-ում ֆլեքսբոքսների հետ աշխատելը

Ինչպես գիտեք, գոյություն ունի justify-content հատկությունը, որը տարրերը հավասարեցնում է հիմնական առանցքի երկայնքով:

Կա նաև align-items հատկությունը, որն տարրերը հավասարեցնում է երկրորդական առանցքի երկայնքով: Եկեք մի փոքր խաղանք դրանով:

Ենթադրենք, մեր բլոկները դասավորված են շարքով, այսինքն՝ երկրորդական առանցքն ուղղված է ներքև: Օգտագործենք align-items՝ այդ բլոկները կենտրոնում տեղադրելու համար.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Եկեք այժմ ավելի շատ բլոկներ ավելացնենք, ավելացնենք բազմատողություն՝ օգտագործելով flex-wrap, մեծացնենք ծնողի բարձրությունը 300px-ից 500px և տեսնենք, թե ինչպես կգործի align-items այս բազմատող դեպքում.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Ինչպես տեսնում ենք, ինչ-որ բան այնքան էլ կենտրոնացված չէ: Թեև թվում է, թե յուրաքանչյուր տող առանձին է կենտրոնանում իրեն հատկացված տարածքում: Եկեք դա անենք այնպես, որ բոլոր տողերը որպես մեկ ամբողջություն կանգնեն ծնողի կենտրոնում:

Դրա համար պետք է օգտագործել align-content հատկությունը, որը նախատեսված է բազմատող տեքստի համար: Եկեք վերագրենք մեր կոդը.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

align-content հատկությունը ընդունում է նույն արժեքները, ինչ align-items-ը:

space-between արժեքը

Օրինակի համար դիտարկենք space-between արժեքը: Եկեք ծնողի համար սահմանենք բարձրությունը 320px: Քանի որ մենք ունենք երեք տող, և համապատասխանաբար երկու բացատ տողերի միջև, ապա այդ բացատներից յուրաքանչյուրը կլինի 10px.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-content: space-between;
	flex-wrap: wrap;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

stretch արժեքը

Փորձենք stretch արժեքը: Դրա համար ժառանգներից հանենք բարձրությունը, իսկ ծնողի բարձրությունը սահմանենք 600px՝ ավելի ակնառու էֆեկտի համար:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-content: stretch;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

align-content-ի համար stretch արժեքը լռելյայն արժեքն է: Եթե մենք ամբողջությամբ հանենք բարձրությունը ժառանգներից, հանենք align-content հատկությունը, բայց թողնենք ծնողի բարձրությունը և flex-wrap - ամեն ինչ կաշխատի նույն կերպ.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

Իսկ եթե հանենք նաև flex-wrap - ամեն ինչ կդառնա միատող.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	width: 300px;
	height: 600px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	border: 1px solid green;
}

Պտտենք առանցքը

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: column;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 500px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Հատուկ պայմաններ

Առանց flex-wrap: wrap ոչինչ չի աշխատում, նույնիսկ եթե մենք ունենք միայն մեկ տող.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: wrap;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Հանենք flex-wrap: wrap - align-content: center կդադարի աշխատել.

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	align-content: center;
	width: 300px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}