Download ការប្រើប្រាស់ CSS Grid និង Flexbox (USING CSS GRID AND FLEXBOX) and more Assignments Web Design and Development in PDF only on Docsity!
1
សារលវិទ្យ ាល័យ អាស ៊ី អឺរប មហាវិទ្យាល័យ វិទ្យាសាស្រ្ត និង បច្ចេកវិទ្យា ច្េបយតឺម៉ង់ ព័ត៌មានវិទ្យា
ការបព្បើព្ាស់ CSS Grid និង Flexbox
( USING CSS GRID AND FLEXBOX)
កិចេការស្រសាវស្រាវថ្នយក់បរិញ្ញយបស្រត ជំនាន់ ២៦, ស្រកុម១ , ឆនយំទ្ី៣ , ឆមា្ទ្ី១ , មុខវិាជយ: Web Design in HTML ឯកច្ទ្្ៈ ព័ត៌មានវិទ្យា
ច្រៀបច្រៀង និងចងស្រកងច្ោយៈ ១. កញ្ញយ ច្េង ភាន ID->៦៧១៤៨ ២. កញ្ញយ ឯម ោលីន ID->៦៧១៦១ ៣. កញ្ញយ ធី ្ុរីវី ID->៦៧១៥៧ ៤. កញ្ញយ ាល់ ្ុភា ID->៦៧១៥០ ៥. ច្ោក រុន ោរ ៉ូ ID->៦៧១៥៧ ៦. ច្ោក ្ុង ប ុនច្ជឿន ID->៦៧១៥៦ ៧. ច្ោក ច្ យ ម៉ម ID->៦៧១៦០
ណែនាំច្ោយសាស្រសារយចារយយ ហេង តារា
២៨ ម្ររា ២០២៥
ឆមាស់ទី ១ ជុំនាញ Web Design ផយើងខ្ញុំមានផសកដីសរាាយរីករាយណាស់ ចុំផ ោះការដាក់កិចចការ ប្ស្វប្ាវររស់ផោកប្គូស្ស្រស្តាចារាយ ផេង តារា ដែលបាន្ដល់កិចចការប្ស្វប្ាវផនោះែល់ផយើងខ្ញុំ សប្មារ់ផ្ែើការសិកាាប្ស្វប្ាវ ផែើម្ាបីពប្ងីកចុំផ ោះែឹង នឹងរទពិផស្្ន៍ផៅថ្ងៃផប្កាយ។ ផេើយផយើងខ្ញុំ ក៏បានផ្ែើការសិកាាប្ស្វប្ាវ និងចងប្កងផ្ែើាផសៀវផៅផនោះផ ើង។
ផសៀវផៅផនោះ វាប្ាន់ដត្រកប្ស្យនូវរញ្ហាម្ួយចុំនួនត្ូច ផៅតាម្លទធភាពដែលខ្ញុំធ្លារ់បាន សិកាាប្ស្វប្ាវកនលងម្ក និងតាម្ឯកស្រផោងខលោះៗផៅកនញងរណាណាល័យ អ្ ៊ី ន្ឺផនត្ និងកដនលងផ្ាស ងៗ។ ផយើងខ្ញុំសងាឃឹម្ថាផសៀវផៅផនោះវាាម្ូលដាឋានម្ួយសប្មារ់ ឈានផៅរកភាពលុំអ្ិត្្ងដែរ។ ផេើយឯកស្រផនោះ ប្ ាន់ដត្រង្ហាញ ពីវិ្ីស្ស្រសតម្ួយចុំនួនដត្រ ៉ុផណាណាោះ។
ាច៉ុងផប្កាយផយើងខ្ញុំរង់ចាុំទទួលការរិោះគន់ពីសុំណាក់ម្ិត្តអ្នកអាន អ្ នកប្ស្វប្ាវ ផោកប្គូ ស្ស្រស្តាចារាយ ម្ិត្ តរួម្ជុំនាន់ និងរអូនៗជុំនាន់ផប្កាយ រាល់កុំេ៉ុសឆគងដែរផកើត្ផ ើងផដាយអ្ផចចត្នា នូវ កាយផពចន៍ វគគ ឃ្ ល ា ផវយាាករ ៍ អ្ កខរប្កម្ ផែើម្ាបី ជួយដកលុំអ្រផអាយផសៀវផៅផនោះកាន់ដត្លអ និងមាន ភាពស៉ុប្កិត្។
ាទីរញ្ចរ់ ផយើងខ្ញុំសូម្ជូនពរែល់ ម្ិត្ តអ្ ន កអាន អ្ ន កប្ស្វប្ាវ ផោកប្គូ ស្ស្រស្ ត ា ចារាយ និងម្ិត្ត និសាសិត្ទុំងអ្ស់ ទទួលបាននូវពរទុំងឡាយរួន សម្ាបត្តិរី អ្ រីយប្ទពាយប្បាុំពីរ និងមានផសកតីស៉ុខ សុំណាងលអប្គរ់ផពលផវោ ផាគ ជ័យផលើការសិកាា និងផាគជ័យនូវផាលរុំ ងដែលរ ងប្គរ់ៗា្ាក៉ុុំ រីខានផ ើយ។
- Introduction
- 1.1 History of CSS Grid and CSS Flexbox
- 1.2 What is CSS Grid Layout?
- 1.3 What is CSS Flexbox Layout?
- 1.4 Property used with Flexbox
- 1.5 Key Differences and Use Cases.
- CSS Grid Layout
- 2.1 Basic Grid Structure
- 2.2 Responsive Grids
- CSS Flexbox Layout
- 3.1 CSS Flex Container
- 3.2 Responsive Flexbox
- Practical Example
- 4.1 Creating a Two-Column Layout with Grid......................................................................
- 4.2 Creating a Three-Column Layout with Grid
- 4.3 Creating a Four-Column Layout with Grid.....................................................................
- 4.4 Building a Responsive Navigation Bar with Flexbox
- Conclusion
- 5.1 Summary of CSS Grid and Flexbox
- References
o Grid Cells : The smallest unit in a grid, the space between four grid lines. o Grid Template Columns and Rows : Define the number and size of columns and rows. o Grid Gap : The space between rows and columns. o Grid Auto Flow : Controls how items are placed in the grid. o Grid Template Areas : Defines named grid areas.
1.3 What is CSS Flexbox Layout?
CSS Flexbox, short for the Flexible Box Layout module, is a one-dimensional layout model that allows you to design flexible and responsive layouts. It is particularly useful for arranging items in rows or columns and includes numerous alignment capabilities. ➢ Key point of CSS Flexbox Layout: o Flex Container : The element that has display: flex; or display: inline- flex; applied to it. Flex Items : The direct children of the flex container. o Main Axis : The primary axis along which flex items are laid out. o Cross Axis : The axis perpendicular to the main axis. o Flex Direction : Defines the direction of the main axis (row, row- reverse, column, column-reverse). o Flex Wrap : Controls whether flex items should wrap onto multiple lines. o Justify Content : Aligns flex items along the main axis. o Align Items : Aligns flex items along the cross axis. o Align Content : Aligns flex lines when there is extra space in the cross axis. o Order : Controls the order of flex items.
o Flex Grow, Shrink, and Basis : Control how flex items grow, shrink, and their initial size.
1. 4 Property used with Flexbox
➢ flex-direction ផែើម្ាបីកុំ ត្់ ទិសផៅផាលថ្នធ្ត្៉ុដែលវា្ទញក ផយើងប្ត្ូវផប្រើ flex-direction។
Property values: Value Description row Displays items horizontally, following the normal text flow (left to right). row-reverse Reverses the order of items, arranging them from right to left. column Stacks items vertically, starting from the top and moving down. column-reverse Flips the vertical order, displaying items from bottom to top.
➢ flex-direction: row The flex container's main-axis is defined to be the same as the text direction. The main-start and main-end points are the same as the content direction. ➢ flex-direction: row-reverse Behaves the same as row but the main-start and main-end points are opposite to the content direction. ➢ flex-direction: column ➢ flex-direction: column-reverse Behaves the same as column but the main-start and main-end are opposite to the content direction.
1.5 Key Differences and Use Cases.
➢ Key Differences: o CSS Grid is two-dimensional, meaning it can handle both rows and columns simultaneously, making it ideal for complex layouts. o Flexbox for simple, one-dimensional layouts and aligning items in rows or columns.
➢ Use Cases:
flex-direction : row | row-reverse | column | column-reverse;
2. 2 Responsive Grids
Building a Responsive Grid-View: Let’s start building a responsive grid-view. First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements. Add the following code in your CSS:
- { }^ box-sizing:^ border-box;
The following example shows a simple responsive web page, with two columns: 25% 75%
3. CSS Flexbox Layout
o Flexbox is short for the Flexible Box Layout module. o Flexbox is a layout method for arranging items in rows or columns. o Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning.
3.1 CSS Flex Container
Like we specified in the previous chapter, this is a flex container (the blue area) with three flex items:
Example:
3. 2 Responsive Flexbox
Responsive flexbox is a CSS layout technique that allows for flexible and responsive web layouts. It's particularly useful for mobile web design, where the layout needs to adapt to different screen sizes and orientations. How does it work? ➢ Flex container : An area of a document that uses flexbox to arrange its elements. ➢ Flex items : The direct children of a flex container.
.flex display:-container flex { }
.menu { width: float: left; 25%; } .main { width: 75%; float: left; }
➢ Step 1) Add HTML: Example:
➢ Step 2) Add CSS: In this example, we will create two equal columns: Fload Example:
A modern way of creating two columns, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions.
Flex Example:
It is up to you if you want to use floats or flex to create a two-column layout. However, if you need support for IE 10 and down, you should use float.
4.2 Creating a Three-Column Layout with Grid
Learn how to create a 3 - column layout grid with CSS.
➢ Step 1) Add HTML: Example:
➢ Step 2) Add CSS: Example:
Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts. Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.
4.3 Creating a Four-Column Layout with Grid
Learn how to create a 4 - column layout grid with CSS.
Example:
Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex- wrap: wrap; on the flex container for this example to work:
Responsive Website using Flexbox Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content:
About Me TITLE HEADING Photo of me: Title description, Dec 7, 2024
5. Conclusion
5.1 Summary of CSS Grid and Flexbox
CSS Grid ➢ Purpose : Designed for 2 - dimensional layouts , handling both rows and columns simultaneously. ➢ Layout Basis : Works with a grid container where you define rows, columns, and their sizes. ➢ Key Features : o Grid tracks: Define rows (grid-template-rows) and columns (grid-template- columns).
o Arranging buttons or cards in a row/column o Small, linear UI components ➢ Key Differences:
6. References
For more information about CSS Grid: https://www.w 3 schools.com/css/css_grid.asp For more information about Flexbox: https://www.w 3 schools.com/css/css 3 _flexbox.asp For more information about Flexbox: https://www.geeksforgeeks.org/css-flex- direction-property/
Thank you!
