CSS'те флекс блокаларды көлдөө огу боюнча тегиздөө

Келгиле, эми блокторду көлдөө огу боюнча да тегиздейли. Бул огу боюнча тегиздөө align-items касиети менен берилет. flex-start мааниси элементтерди окуянын башына жакындатат, ал эми flex-end мааниси - аягына.

Келгиле, мисалдар менен сынап көрөлү.

Мисал

Негизги окуяны солдон оңго карай багыттайлы. Бул учурда көлдөө окуясы жогортон төмөн карай багытталат. Келгиле, биздин блоктордун жайгашышын негизги окуя боюнча да, көлдөө окуясы боюнча да жөнгө салалы.

Негизги окуя боюнча блокторду анын башына, башкача айтканда сол четке жакындатайлы. Бул үчүн justify-content маанисин flex-start кылып коёбуз. Көлдөө окуясы боюнча да блокторду анын башына, башкача айтканда жогорку четке жакындатайлы. Бул үчүн align-items маанисин да flex-start кылып коёбуз.

Эмне чыгарып жатканыбызды карап көрөлү:

.parent {
	display: flex;
	flex-direction:  row;        /* негизги окуя оңго, көлдөө окуясы төмөн */
	justify-content: flex-start; /* блокторду негизги окуянын башына */
	align-items:     flex-start; /* блокторду көлдөө окуясынын башына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Келгиле, эми блокторду көлдөө окуясынын аягына, башкача айтканда төмөнкү четине жакындатайлы. Бул үчүн align-items маанисин flex-end кылып коёбуз:

.parent {
	display: flex;
	flex-direction:  row;        /* негизги окуя оңго, көлдөө окуясы төмөн */
	justify-content: flex-start; /* блокторду негизги окуянын башына */
	align-items:     flex-end;   /* блокторду көлдөө окуясынын аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Эми негизги окуяны жогортон төмөн карай багыттайлы. Негизги окуя тик болгондуктан, көлдөө окуясы оңдон солго карай багытталат. Келгиле, блокторду эки окуя боюнча да алардын башына жакындатайлы:

.parent {
	display: flex;
	flex-direction:  column;     /* негизги окуя төмөн, көлдөө окуясы оңго */
	justify-content: flex-start; /* блокторду негизги окуянын башына */
	align-items:     flex-start; /* блокторду көлдөө окуясынын башына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

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

.parent {
	display: flex;
	flex-direction:  column;     /* негизги окуя төмөн, көлдөө окуясы оңго */
	justify-content: flex-start; /* блокторду негизги окуянын башына */
	align-items:     flex-end;   /* блокторду көлдөө окуясынын аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Блокторду эки окуянын да аягына жакындатайлы:

.parent {
	display: flex;
	flex-direction:  column;   /* негизги окуя төмөн, көлдөө окуясы оңго */
	justify-content: flex-end; /* блокторду негизги окуянын аягына */
	align-items:     flex-end; /* блокторду көлдөө окуясынын аягына */
}

Кодду иштетүүнүн натыйжасы:

Мисал

Келгиле, негизги окуянын багытын өзгөртөлү - аны төмөндөн жогору карай багыттайлы. Бул учурда көлдөө окуясы өз багытын өзгөртпөйт, анткени негизги окуя дагы эле тик болуп калат.

Блокторду эки окуянын да башына жакындатайлы:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* негизги окуя жогору, көлдөө окуясы оңго */
	justify-content: flex-start;     /* блокторду негизги окуянын башына */
	align-items:     flex-start;     /* блокторду көлдөө окуясынын башына */
}

Кодду иштетүүнүн натыйжасы:

Практикалык тапшырмалар

Бул үлгү боюнча баракты кайталаңыз: