From the course: CSS Shorts
Unlock this course with a free trial
Join today to access over 23,100 courses taught by industry experts.
Flex your columns - CSS Tutorial
From the course: CSS Shorts
Flex your columns
- [Chris] Hi, this is Chris Converse and in this episode we'll create some columns in our web page using the CSS flex property. The flex property gives us greater control over layouts and they're responsive allowing us to change the layout for smaller screens. And while the flex property is still rather new, all modern HTML5 browsers support the property, including partial support for IE11. So, if you'd like to follow along with me, download the exercise files and let's begin by opening index.html in a text editor. Now, once you have the HTMl file open, in the top head area we have a link to style.css which we'll open in a moment. In the body area we have a main HTML5 element, inside of the main element we have an h1, and then a section element, and inside of the section element we have three div elements. This one here, one here and one here. It's these div elements that we're going to turn into columns using the flex property. And if you'd like to preview the layout we're going to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- CSS_creating_a_star.zip
- CSS_curved_header.zip
- CSS_attribute_content.zip
- CSS_color_SVG.zip
- CSS_progress_bar.zip
- CSS_diamond_image_crop.zip
- CSS_perspective_sidebar.zip
- CSS_3d_product_box.zip
- CSS_responsive_iframes.zip
- CSS_required_fields.zip
- CSS_striped_background.zip
- CSS_filtering_a_list.zip
- CSS_Background.zip
- CSS_layout_patterns.zip
- CSS_multiple_background_images.zip
- CSS_photo_gallery.zip
- CSS_accordion.zip
- CSS_aspect_ratio.zip
- CSS_border_image.zip
- CSS_download_type.zip
- CSS_variables.zip
- CSS_not_selector.zip
- CSS_creating_a_vignette.zip
- CSS_parallax_scroll_effect.zip
- CSS_spanning_flex_columns.zip
- CSS_speech_bubble.zip
- CSS_gradients_and_blend_modes.zip
- CSS_see_more_links.zip
- CSS_animating_SVG_elements.zip
- CSS_clip_image.zip
- CSS_focus_on_rollover.zip
- CSS_gradient_text.zip
- CSS_vertically_align_with_flex.zip
- CSS_PNG_shadow.zip
- CSS_placeholder_text.zip
- CSS_Position.zip
- CSS_Float.zip
- CSS_link_buttons.zip
- CSS_visited_links.zip
- CSS_blockquote.zip
- CSS_shadow_effects.zip
- CSS_logo_hyperlink.zip
- CSS_first_last_of_type.zip
- CSS_less_sass_color_vars.zip
- CSS_calc_columns.zip
- CSS_nested_hover_states.zip
- CSS_row_of_links.zip
- CSS_tool_tips.zip
- CSS_table_rows_columns.zip
- CSS_Adjusting_Colors_SASS_and_LESS.zip
- CSS_expandable_mobile_menu.zip
- CSS_vertically_align_text.zip
- CSS_dividing_columns.zip
- CSS_creating_a_grid.zip
- CSS_drop_cap.zip
- CSS_SASS_nesting.zip
- CSS_LESS_nesting.zip
- CSS_flex_columns.zip
- CSS_focus_selector.zip
- CSS_position_center.zip
- CSS_responsive_footer.zip
- CSS_SASS_mixins.zip
- CSS_LESS_mixins.zip
- CSS_checkboxes_to_switches.zip
- CSS_blurring_images.zip
- CSS_overlapping_heading_rule.zip
- CSS_offsite_links.zip
- CSS_pie_chart.zip
- CSS_numbering_items.zip
- CSS_animating_background_images.zip
- CSS_text_indents.zip
- CSS_flex_pseudo_element.zip
- CSS_grayscale_images.zip
- CSS_angled_header.zip
- CSS_creating_polka_dots.zip
- CSS_custom_radio_buttons.zip
- CSS_outlined_text.zip
- CSS_images_with_pseudo_elements.zip
- CSS_gradient_horizontal_rule.zip
- CSS_embed_SVG_in_CSS.zip
- CSS_styling_big_list_numbers.zip
- CSS_detecting_screen_resolution.zip
- CSS_continuing_numbered_list.zip
- CSS_qrcode_for_print.zip
- CSS_interactive_tabbed_panels.zip
- CSS_grid_of_images.zip
- CSS_sticky_footer.zip
- CSS_selection_color.zip
- CSS_transition_mobile_menu.zip
- CSS_animate_sprite_sheet.zip
- CSS_style_telephone_links.zip
- CSS_circular_text_wrap.zip
- CSS_box_sizing.zip
- CSS_text_on_angle.zip
- CSS_triangle_bullets.zip
- CSS_word_wrap.zip
- CSS_3D_text_shadow.zip
- CSS_display_hyperlink_url.zip
- CSS_style_breadcrumb_links.zip
- CSS_nth_child.zip