[CSS Flexbox 1/2]

-

 Flexbox is a powerful, well-supported layout method that was introduced with the latest version of CSS, CSS3. With flexbox, it's easy to center elements on the page and create dynamic user interfaces that shrink and expand automatically.

In this course, you'll learn the fundamentals of flexbox and dynamic layouts by building a Twitter card.


1. Use display: flex to Position Two Boxes

This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.


Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.



Let me Add the CSS property display to #box-container and set its value to flex.



2. Add Flex Superpowers to the Tweet Embed

To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.


3. Use the flex-direction Property to Make a Row

Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.

Other options for flex-direction are row-reverse and column-reverse.

Note: The default value for the flex-direction property is row.




Let me Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse. flex-direction: row-reverse




4. Apply the flex-direction Property to Create Rows in the Tweet Embed
The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.

5. Use the flex-direction Property to Make a Column
The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container.

6. Apply the flex-direction Property to Create a Column in the Tweet Embed
The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column.

Let me Add the CSS property flex-direction to the header's .profile-name element and set the value to column.


7. Align Elements Using the justify-content Property
Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.

Here is a useful image from W3C illustrating the concepts below for a 'row' flex container.
Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.

There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Other options include:

flex-start: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no justify-content is specified.


flex-end: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.


space-between: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.


space-around: similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.


space-evenly: Distributes space evenly between the flex items with a full space at either end of the flex container.



8. Align Elements Using the align-items Property

The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.

Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.

CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.




The different values available for align-items include:

flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.


flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.


center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).


stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.


baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.


Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt 는  그 값의 아래는 전부 불러옴. 예를들어 Banana를 입력했을 깨 500과 그 아래 값들도 모두 불러옴. 때문에 break 를 써줘야함 default는 해당하지 않는 값을 입력했을 때 ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more