[CSS Flexbox 2/2]

-

1. Use the flex-wrap Property to Wrap a Row or Column

CSS flexbox has a feature to split a flex container into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.


However, using the flex-wrap property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.


CSS also has options for the direction of the wrap:

nowrap: this is the default setting, and does not wrap items.

wrap: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.

wrap-reverse: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.



The current layout has too many boxes for one row. Let me Add the CSS property flex-wrap to the #box-container element, and give it a value of wrap.



2. Use the flex-shrink Property to Shrink Items

So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.


The first is the flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.


The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.


Let me Add the CSS property flex-shrink to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2.



3. Use the flex-grow Property to Expand Items

The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.


Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.



4. Use the flex-basis Property to Set the Initial Size of an Item

The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.


The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.



5. Use the flex Shorthand Property

There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.


For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.


The default property settings are flex: 0 1 auto;.


Let me Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.


These values will cause #box-1 to grow to fill the extra space at twice the rate of #box-2 when the container is greater than 300px and shrink at twice the rate of #box-2 when the container is less than 300px. 300px is the combined size of the flex-basis values of the two boxes.




6. Use the order Property to Rearrange Items

The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.


Let me Add the CSS property order to both #box-1 and #box-2. Give #box-1 a value of 2 and give #box-2 a value of 1.



7. Use the align-self Property

The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.


align-self accepts the same values as align-items and will override any value set by the align-items property.


Let me Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-start.




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