theodousკითხვები არ გაქვს?
რაც გააკეთე ყველაფერი იცი რა და რატომ მუშAობს?
ჯერ გაეშვი მაგ ფლექსს
ჯერ display პროპერთის ორი მნიშვნელობა განვიხილოთ
block & inline-block
<div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.child {
display: block;
width: 50px;
height: 50px;
background: lightcoral;
}
block
სელექტორს რომელსაც ეს პროპერთი უყენია ელემენტს გადაიტანს ახალ ხაზზე (როგორც მაგალითად p ტეგი)
და ამ ელემენტს სიგანე(width) ექნება 100%(დეფაულტად, თუ ჩვენ არ დავუყენეთ სხვა მნიშვნელობა , რასაც ვაკეთებთ კიდეც width: 50px)
ხოლო სიმაღლე(height) აუტომატური ექნება(თუ ჩვენ დავუყენეთ სხვა მნიშვნელობა, რასაც ვაკეთებთ კიდეც height: 50px)
ჩვენ შემთხვევაში გვაქვს სამი დივ ელემენტი და შესაბამისად შედეგიც იქნება შემდეგი: თითოეულ ელემენტს გაიტანს დაბლა ახალ ხაზზე
ასევე შეგვიძლია ამ ელემენტს დავუყენოთ შემდეგი თვისებები: margin და padding
დივ ტეგები დეფაულტად არის block (დაიმახსოვრე)
მოდი დავუყელოთ მარგინი ბლოკ ელემენეტებს რა დავალებაც მოგეცი
margin: 20px auto
.child {
display: block;
width: 50px;
height: 50px;
background: lightcoral;
margin: 20px auto;
}
ანუ მარგინს გაუკეთებს top-bottom 20px -ს
left-right auto-ს
ეს მოქმენდება გრძლად რომ ჩავწეროთ იქნება შემდეგი
margin: 20px auto 20px auto
ანუ ეხლა ამ მნიშვნელობებს შეხედე საათის ისრის მიმართულებით
margin:
top - 20px - 12 საათი
left - auto - 9 საათი
bottom - 20px - 6 საათი
right - auto - 3 საათი
და ამის შემოკლებული ფორმა აარის ეს
margin:
top-bottom - 20px - 12 & 6 საათი
left-right- auto - 9 & 3 საათი
რაც შეეხება inline-block -ს
.child {
display: inline-block;
width: 50px;
height: 50px;
background: lightcoral;
}
block ისგან განსხვავებით ის დაალაგებს ელემენტებს გვერდიგვერდ თუ ამისთვის საკარისი ადგილი არსებობს (როგორ მაგალითად span)
ასევე შეგვიძლია ამ ელემენტს დავუყენოთ შემდეგი თვისებები: margin, padding, width, height
იმედია ცოტა გასაგებად ავხსენი არ მეხერხება ეს მასწავლებლობა
თუ შენიშვნა ექნება ვინმეს დაწერს
თუ რამე დასვი კითხვა და გიპასუხებ რა
წაივარჯიშე ამეებზე მერე გადადი dispaly ის სხვა თვისებებზე იგივე ფლექსი რაც გამოყენებული გაქვს მაღლა
ოღონდ ჯერ ამეებზე ივარჯიშე
პ.ს. შემდეგი დავალება იქნება ტექსტები ჩასვი ამ ბოქსებში და გააცენტრე
This post has been edited by loopback on 6 Oct 2019, 16:51