Justify-content касиети

justify-content касиети flex блоктору үчүн элементтерди башкы огу боюнча, гриддер үчүн горизонталдык огу боюнча тегиздейт. Ата-эне элементин колдонулат.

Синтаксис

селектор {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

Маанилери

Маани	Сүрөттөмө
`flex-start`	Блоктор башкы (горизонталдык) огунун башталышына басылган.
`flex-end`	Блоктор башкы (горизонталдык) огунун аягына басылган.
`center`	Блоктор башкы (горизонталдык) огунун борборунда турат.
`space-between`	Блоктор башкы (горизонталдык) огу боюнча бөлүштүрүлгөн, ал эми биринчи элемент огунун башталышына, акыркысы - аягына басылган.
`space-around`	Блоктор башкы (горизонталдык) огу боюнча бөлүштүрүлгөн, ал эми биринчи блок менен огунун башталышынын, акыркы блок менен огунун аягынын ортосундагы аралык башка блоктордун ортосундагы аралык сыяктуу эле. Бирок, көрүнгөндөй алар барабар эмес: аралыктар кошулат жана эки блоктун ортосундагы аралык блок менен огунун башталышы/аягынын ортосундагы аралыктан эки эсе чоңураак.

Демейки маани: flex-start.

Мисал . flex-start мааниси

Учурда огу солдон онго карай багытталган (муну flex-direction: row жасайт), ал эми блоктор сол жагына басылган:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . flex-end мааниси

Бул мисалда огу дагы солдон онго карай багытталган, бирок блоктор оң жагына басылган, анткени justify-content мааниси катары flex-end коюлган:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . center мааниси

Учурда блоктор башкы огунун багытына карабастан борбордо турат:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . space-between мааниси

Блоктор башкы огу боюнча бөлүштүрүлгөн, ал эми биринчи элемент огунун башталышына басылган, акыркысы - аягына:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . space-around мааниси

Блоктор башкы огу боюнча бөлүштүрүлгөн, ал эми биринчи блок менен огунун башталышынын, акыркы блок менен огунун аягынын ортосундагы аралык башка блоктордун ортосундагы аралык сыяктуу эле. Бирок, аралыктар кошулат жана эки блоктун ортосундагы аралык эки эсе чоңураак, блок менен огунун башталышы/аягынын ортосундагы аралыктан:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . center мааниси. Огу төмөн

Башкы огунун багытын өзгөртөбүз, flex-direction маанисин column кылып коёбуз:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . space-between мааниси. Огу төмөн

Учурда блоктор вертикалдык боюнча тегиз бөлүштүрүлөт:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 400px;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Мисал . Гридде горизонталдык огунун башталышы боюнча тегиздөө

Элементтерибизди горизонталдык огунун башталышы боюнча тегиздейли:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Мисал . Гридде горизонталдык огунун борбору боюнча тегиздөө

Эми элементтерибизди горизонталдык огунун борбору боюнча тегиздейли:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Мисал . Гридде горизонталдык огунун аягы боюнча тегиздөө

Элементтерибизди горизонталдык огунун аягы боюнча тегиздейли:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-content: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Дагы караңыз

flex-direction касиети,
ал flex блокторунун окторунун багытын белгилейт
align-items касиети,
ал көлдөө огу боюнча тегиздөөнү белгилейт
flex-wrap касиети,
ал flex блокторунун көп саптуулугун белгилейт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартылган жазуу
order касиети,
ал flex блокторунун иреттөөсүн белгилейт
align-self касиети,
ал бир блоктун тегиздөөсүн белгилейт
flex-basis касиети,
ал белгилүү бир flex блогунун көлөмүн белгилейт
flex-grow касиети,
ал flex блокторунун ач көздүгүн белгилейт
flex-shrink касиети,
ал flex блокторунун кыскаруучулугун белгилейт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартылган жазуу