flex თვისება

flex თვისება არის შემოკლება flex-basis, flex-shrink და flex-grow თვისებებისთვის.

გამოიყენება: კონკრეტულ flex ელემენტზე.

მნიშვნელობების თანმიმდევრობას მნიშვნელობა არ აქვს. მეორე და მესამე პარამეტრები (flex-shrink, flex-basis) არ არის სავალდებულო.

მნიშვნელობები

იხილე შესაბამისი თვისებები.

ნაგულისხმევი მნიშვნელობა: 0 1 auto.

მაგალითი

დავუშვათ, გვაქვს 3 ელემენტი. თითოეული მათგანის სიგანე არის 200px და ჯამურად 600px, რაც მშობელი კონტეინერის სიგანეზე მეტია, რომელიც არის 300px. პირველ ელემენტს მივანიჭოთ სიგანე 200px, მეორე ელემენტს - 300px, მესამე ელემენტს - 100px. ყველა ელემენტისთვის flex-basis-ის მნიშვნელობა იყოს 1, ხოლო flex-shrink - 1, 2, 3 ელემენტის რიგითი ნომრის შესაბამისად:

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

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

ასევე იხილე

flex-direction თვისება,
რომელიც ადგენს flex ელემენტების ღერძების მიმართულებას
justify-content თვისება,
რომელიც ადგენს გასწორებას მთავარი ღერძის მიმართ
align-items თვისება,
რომელიც ადგენს გასწორებას განივი ღერძის მიმართ
flex-wrap თვისება,
რომელიც ადგენს flex ელემენტების მრავალსტრიქონიანობას
flex-flow თვისება,
რომელიც არის flex-direction-ის და flex-wrap-ის შემოკლება
order თვისება,
რომელიც ადგენს flex ელემენტების თანმიმდევრობას
align-self თვისება,
რომელიც ადგენს ერთი ელემენტის გასწორებას
flex-basis თვისება,
რომელიც ადგენს კონკრეტული flex ელემენტის ზომას
flex-grow თვისება,
რომელიც ადგენს flex ელემენტების "მოწევას"
flex-shrink თვისება,
რომელიც ადგენს flex ელემენტების შეკუმშვადობას