Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Introduction to Flexbox! - Tutorial 2 of 20 

0 (0 Likes / 0 Dislikes)
Witajcie wszyscy W tej pierwszej lekcji chcę wam pokazać jak "obchodzić" się z FlexBoxem.(elastyczny układ) Dzięki temu będziesz czuł się bardziej komfortowo w dalszej części kursu, poznasz dwa fundamentalne pojęcia/koncepcje elastycznego układu i ich elementów. Zapraszam! OK Zaczniemu od tego, że mamy tutaj znacznik DIV z klasą "container" wśrodku którego mamy kilka innych znaczników DIV. Nasz główny DIV będzie elastycznym pojemnikem (flex container), A każdy wewnętrzny (DIV "BOX") będzie elastycznym elementem strony(FLEX ITEMS), które oczywiście nie muszą być DIV-em!! - mogą być innym elementem strony - obrazkiem, paragrafem itp. Dla przejrzystości stworzyłem jednak stronę na podstawie DIV-ów. Dodałem klasy, żeby było czytelniej, ale naprawdę do tego działania to niepotrzebne. Mam tez plik CSS z odniesieniem do poszczególnych DIV "BOX", dodałem podstawe style dla wygladu i koloru. Ale to naprawdę tylko dla przejrzystości i lepszego zrozumienia elastycznego układu(FlexBox). OK po odświeżeniu przeglądarki, mam 10 divów każdy z nich poukładany jest w kolejności tak jak widać. Zaczniemy od lini 32 i rozpoczniemy z elestycznym układem strony musimy na początku zdefiniować nasz DIV "conatainer" jako element tego elastycznego układu i go z nim powiązać przez instrukację FLEX, TO JEST WAZNE, tym bardziej, że wcześniej byłeś przyzwyczajony do innego rodzaju deklarowania wyglądu strony. Elastyczny Układ strony to inne podejśćie do tworzenia stron, do tej pory na pewno "walczyłeś" z procentami i opływaniem na swojej stronie, te wszystkie przeliczenia!!! Zostawmy to. FlexBox to inne podejśćie OK, mamy już ustwione wyświetlanie jako flex na elemencie container odświeżę przeglądarkę i co się stanie ? A zatem: mój główny pojemnik DIV "conatainer" - dodadam obramowanie dla lepszej widoczności - jak widzisz nasz DIV obejmuje całość strony włącznie z elemetami BOX, wszystkie elementy są ułożone w jednej linii. Ale DIV obejmuje całą stronę. Oczywiście mamy tez INLINE-FLEX który jak elementy inline otacza wszystkie elementy umieszczone w nim i jest szerokości jego elementów wewnętrznych. Wrócmy jednak do FLEX i odświeżmy stronę. Zatem nasz element DIV zajmuje całą szerokość strony Dodatkowo wszystkie elementy wewnątrz DIV "CONTAINER" otrzymują właściwość elastyczności, co oznacza, że sa one FLEX ITEM - tworzona jest połączenie, które usprawnia pracę z elastycznym układem, wszystko odbywa się automatycznie co usprawnia pisanie kodu. W następnych video będę mówił o orientacji i kierunku układu elastycznego. Gdy pierwszy raz zapoznawałem się z tematem, trochę poczułem się zgubiony przyczyną tego było różna wielkość i szerokość elemtów na stronie, Dla potrzeb tego kursu chcę się pozbyć tego problemu i stworzę jednolity wygląd BOX, aby uniknąć nieczytelności. W realnym świecie, każdy element strony ma swoją wysokość, uzależnioną od zawartośći Ustawię więc wysokość na 100vh, jeżeli nie znasz jeszcze VH - to odpowiednik zapisu "100%" uzależnionego od wysokości obecnej w twojej przeglądarce. Pozwoli to nam na rozszerzenie wysokości BOX i dostosowanie jej do naszej przeglądarki. Zapis VH jest zbliżony do 100% i jest nowym sposobem zapisu bardziej elastycznym, nie ma to nic wspólnego z Elastycznym Układem ale pozwala efektywniej wykorzystać nowe możliwości przeglądarek. OK zatem mamy już przygotowany szkielet naszego kursu. mamy elastyczny DIV "CONTAINER" i elementy przyjmujące wartość FLEX ITEM. W następnym wideo dowiecie się więcej o podstawach orientacji i kierunku układu elastycznego

Video Details

Duration: 4 minutes and 19 seconds
Country:
Language: English
License: Dotsub - Standard License
Genre: None
Views: 21
Posted by: panrada on Nov 24, 2015

Introduction to Flexbox! - Tutorial 2 of 20 

Caption and Translate

    Sign In/Register for Dotsub above to caption this video.